在前面封装的move.js框架，在jquery中有同样封装好的功能animate()。使用方法非常类似，下面我们看看animate的使用方法，有了原生的运动方法，然后再使用jquery的运动方法就会变得非常简单。
animate()语法
$(selector).animate({params},speed,callback);必需的params参数定义形成动画的css属性。
可选的speed参数规定效果的时长。它可以取以下值“slow”，“fast”或毫秒。
可选的callback参数是动画完成后所执行的函数名称。
注意：如需对位置进行操作，要记得首先把元素的CSS position属性设置为relative、fixed或absoult。
用animate()方法做一个多属性同时运动的例子
<!DOCTYPE html>
<html>
<head><style>#div1{height:100px;width:100px;background:#f00;position:absolute;}</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script>$(document).ready(function(){$("button").click(function(){$("div").animate({left:'250px',height:'150px',width:'150px'},300,function(){$("div").animate({opacity:'0.5'})});});});
</script>
</head><body><button>开始动画</button>
<div id="div1">
</div></body>
</html>
通过上面的代码我们可以看出jquery运动可以做多属性运动，也可以做链式运动，也可以做单属性运动。调用方式跟我们用原始javascript封装的框架一样。区别在于这里可以设定速度。json串中带px等单位。jquery运动做链式运动的时候可以使用回调函数，多写几个运动。animate的更多使用方法可以参考http://www.w3school.com.cn/jq...。
注意：是否可以用animate()方法来操作所有css属性？是的，几乎可以！不过，需要记住一件重要的事情：当使用animate()时，必须使用Camel标记法书写所有的属性名，比如，必须使用paddingLeft而不是padding-left，使用marginRight而不是margin-right等等。同时，色彩动画并不包含在核心jQuery库中。如果需要生成颜色动画，您需要从jQuery.com下载Color Animations插件。
animate()使用预定义的值——"show"/"hide"/"toggle"
<!DOCTYPE html>
<html><head><title>jquery animate可以使用预定义的值</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><style>#div1{background: #f00;width: 100px;height: 100px;position: absolute;}</style><script>$(function(){$("button").click(function(){$("div").animate({height:"toggle"});})})</script></head><body><button>开始动画</button><div id="div1"></div></body>
</html>
animate()使用队列功能——类似于我们自己封装的链式运动
我们封装的运动没有队列功能。但是jquery提供针对动画的队列功能。这就意味着如果您在彼此之后编写多个animate()调用，jquery会创建包含这些方法调用的内部队列。然后逐一运动这些animate调用。
<!DOCTYPE html>
<html><head><title>animate队列调用</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><style>#div1{width: 100px;height: 100px;background: #f00;position: absolute;}</style><script>$(function(){$("button").click(function(){var div=$("div");div.animate({height:"300px",opacity:"0.4"},"slow");div.animate({width:"300px",opacity:"0.8"},"slow");div.animate({height:"100px",opacity:"0.4"},"slow");div.animate({width:"100px",opacity:"0.8"},"slow");})})</script></head><body><button>开始动画</button><div id="div1"></div></body>
</html>
stop()停止动画或效果
stop()方法用于停止动画或效果，在它们完成之前。
stop()方法适用于所有jquery效果函数，包括滑动、淡入淡出和自定义动画。
语法：
$(selector).stop(stopAll,goToEnd);- 可选参数stopAll规定是否应该清除动画队列。默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
- 可选参数goToEnd规定是否立即完成当前动画。默认是false。
所以，默认的stop()会清除在被选元素上指定的当前动画。
<!DOCTYPE html>
<html>
<head><title>stop()清除当前运动</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script>$(function() {$("#flip").click(function() {$("#panel").slideDown(5000);});$("#stop").click(function() {$("#panel").stop();});});</script><style type="text/css">#panel,#flip {padding: 5px;text-align: center;background-color: #e5eecc;border: solid 1px #c3c3c3;}#panel {padding: 50px;display: none;}</style>
</head>
<body><button id="stop">停止滑动</button><div id="flip">点击这里，向下滑动面板</div><div id="panel">Hello world!</div>
</body>
</html>
)
