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