在前面封裝的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>
)
