一、animate()语法
$(“选择器”).animate({CSS样式},时间,运动方式,回调函数);
参数说明：
参数1：CSS属性名，属性值，JSON格式{"属性名":"属性值"}
参数2：动画执行时间，毫秒
参数3：动画的运动方式，参数要用引号，例如：linear是匀速播放
参数4：回调函数function(){}，动画完毕后，执行的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div{
width:200px;
height:200px;
background: greenyellow;
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$('div').animate({'top':500,'left':400},3000,function(){
$(this).css('backgroundColor','pink');
})
</script>
二、不能参加运动的属性
我们关心的不能参加运动的有哪些？
1、background-color 背景色。但是CSS3可以实现
2、background-position背景定位，但是CSS3可以实现
3、一切的CSS3属性不能动画，border-radius除外。
三、动画排序
一个元素animate的时候，会按顺序执行
//$('div').animate({"left":500},1000);
//$('div').animate({"top":500},1000);
//$('div').animate({"left":0},1000);
//$('div').animate({"top":0},1000);
同一个元素多次打点animate的时候，动画会自动排成队列，谁先写的，谁先执行。
$('div').animate({"left":500},1000).animate({"top":500},1000).animate({"left":0},1000).animate({"top":0},1000);
四、异步语句和回调函数
animate动画方法是一个异步语句，也可以写回调函数，描述运动结束后可以做什么事情。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div{
width:100px;
height:100px;
background: red;
position:absolute;
top:100px;
left:0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$('div').animate({'left':500},1000,function(){
$(this).css('backgroundColor','blue');
}) </script>
其他方法也都有回调函数：
slideUp()、slideDown()、fadeIn()、fadeOut()、show()、hide()
五、延迟动画delay()
所有动画方法都可以用delay()。表示这动画不是立即执行，要等待一段时间再执行。
参数：规定延迟时间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div{
width:100px;
height:100px;
background: red;
position:absolute;
top:0;
left:0; }
</style>
</head>
<body>
<div></div>
</body>
</html>
<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// $('div').delay(1000).slideUp();
// $('div').delay(1000).slideDown();
// $('div').delay(2000).nimate({'left':500},1000) $('div').delay(1000).slideUp().delay(1000).slideDown().delay(2000).animate({'left':500},1000)
</script>
六、stop()停止动画方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div{
width:100px;
height:100px;
background: red;
position:absolute;
top:100px;
left:0;
} </style>
</head>
<body>
<input type="button" value="stop()默认flase\false">
<input type="button" value="stop(true)">
<input type="button" value="stop(true,true)">
<input type="button" value="stop(false,true)">
<input type="button" value="finish()">
<div></div>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$('div').animate({'left':1000},1500);
$('div').animate({'top':300},1500);
$('div').animate({'left':0},1500);
$('div').animate({'top':100},1500);
//stop(是否清空动画队列,是否完成当前动画);
$('input').eq(0).click(function(){
$('div').stop();// false false
})
$('input').eq(1).click(function(){
$('div').stop(true); //true flase
})
$('input').eq(2).click(function(){
$('div').stop(true,true);
})
$('input').eq(3).click(function(){
$('div').stop(false,true);
})
</script>
七、is(':animated')
is表示“是不是”，而不是“是”，表示检测某一个元素是否具备某种状态，返回true、false的布尔值。
is里面可以写选择器：
1 $(this).is(".t"); //判断当前被点击的p是否有.t这个类名，是就返回true
2 $(this).is("#t"); //判断当前被点击的p是否有#t这个id名，是就返回true
3 $(this).is("p:odd"); //判断当前被点击的p是否是奇数，是就返回true
4 $(this).is("p:lt(3)"); //判断当前被点击的p下标是否小于3，是就返回true
$(this).is("p:visible"); //判断当前被点击的p是否可见
八、动画节流
当一个元素身上被积累了很多动画，不经之间就积累了，我们称为“流氓”
希望新的动画触发时，前面这个动画全部清空，立即停止，防止用户频繁触发事件
方法1：用stop()。清空前面所有动画队列，立即停止当前动画，参数值传第一个true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div{
width:100px;
height:100px;
background: orange;
position:absolute;
top:100px;
left:0;
}
</style>
</head>
<body>
<input type="button" value="到0广州">
<input type="button" value="到1000北京">
<div></div>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$('input').eq(0).click(function(){
$('div').stop(true).animate({'left':0},1000);
})
$('input').eq(1).click(function(){
$('div').stop(true).animate({'left':1000},1000)
}) </script>
方法2：节流方法，判断元素is()是否在运动过程中，如果是，就不执行后面的操作；如果不是，就执行后面的动画。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div{
width:100px;
height:100px;
background: orange;
position:absolute;
top:100px;
left:0;
}
</style>
</head>
<body>
<input type="button" value="到0广州">
<input type="button" value="到1000北京">
<div></div>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$('input').eq(0).click(function(){
if(!$('div').is(':animated')){
$('div').animate({'left':0}, 2000)
}
})
$('input').eq(1).click(function(){
if(!$('div').is(':animated')){
$('div').animate({"left":1000},2000);
}
}) </script>