语法：css
$(selector).animate({params},speed,callback);
必需的 params 参数定义造成动画的 CSS 属性。html
可选的 speed 参数规定效果的时长。它能够取如下值："slow"、"fast" 或毫秒。jquery
可选的 callback 参数是动画完成后所执行的函数名称。函数
jQuery全部动画属性均可以被动画化为一个单独的数值，除了下面所提到的之外，大多数非数字的属性不能使用基本的jQuery功能进行动画（例如，宽度、高度或者左边能够被动画化，可是背景颜色，字体颜色不能）学习
参考手册：https://www.w3cschool.cn/jquery/eff-animate.html字体
语法:动画
$(selector).stop(stopAll,goToEnd); 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅中止活动的动画，容许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否当即完成当前动画。默认是 false。
所以，默认地，stop() 会清除在被选元素上指定的当前动画。ui
练习demo:spa
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery学习 animate动画</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test").animate({
left:'50px',
top:'100px',
opacity:'0.8',
height:'150px',
width:'250px',
});
});
$("#btn2").click(function(){
$("#test2").animate({
height:'toggle',
width:'toggle',
});
});
$("#btn3").click(function(){
var obj=$("#test3")
obj.animate({height:'300px'},'slow');
obj.animate({width:'300px'},'slow');
obj.animate({height:'200px'},'slow');
obj.animate({width:'200px'},'slow');
obj.animate({opacity: "0.5",},'slow');
});
$("#btn4").click(function(){
$("#test3").stop();
})
})
</script>
<style>
.box,.box2,.box3{
width: 300px;
margin:0 auto;
border: 2px solid green;
position: relative;
}
.box2{
margin-top:220px;
}
.box3{
background-color: red;
}
#test{
background:#98bf21;
width:200px;
position:absolute;
}
#test2,#test3{
background-color:yellow;
width:200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box">
<button id="btn1">点击</button>
<div id="test">
默认状况下，全部的 HTML 元素有一个静态的位置，且是不可移动的。
若是须要改变为，咱们须要将元素的 position 属性设置为 relative, fixed, 或 absolute!
</div>
</div>
<div class="box2">
<button id="btn2">toggle实现显示隐藏</button>
<div id="test2">
toggle
</div>
</div>
<div class="box3">
<button id="btn3">多个animate</button><button id="btn4">中止</button>
<div id="test3">
多个animate
jQ没法的animate没法修改背景色，
能够设置父级背景色和子级的背景色+透明度opacity来修改(虽然有点不可预知)
</div>
</div>
</body>
</html>
预览code