jQuery的animate动画方法及动画排队问题解决
animate（）动画方法
-
作用：执行css属性集的自定义动画
-
语法：$(selector).animate(styles,speed,easing,callback)
• 参数1： css 的属性名和运动结束位置的属性值的集合。
• 参数2：可选，规定动画的速度，默认是 "normal"。其他值，“slow”、“normal”、“fast”，数字格式，单位为毫秒。
• 参数3：可选，规定在不同的动画点中设置动画速度的 easing 函数，值包含 swing（变速） 和linear（匀速）。
• 参数4：可选，animate 函数执行完之后，要执行的回调函数。
• 注意：①所有有数值的属性值都可以运动；
②其他的运动方法比如 slideUp() 等，也有参数3 和参数4
<style>
*{
margin: 0;
padding: 0;
}
p{
position: relative;
left: 0;
margin-bottom: 10px;
background-color: skyblue;
width: 50px;
height: 50px;
}
</style>
<!--------------------------------------->
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
var $ps = $("p");
//实际操作中，将时间这种易变的存储到一个变量中更好
var during = 1000;
//所有有数值的属性值都可以运动
$ps.click(function(){
$(this).animate({"width":500,"opacity":0.5},during,"swing")
})
</script>
</body>
动画排队
- 同一个元素对象身上，如果定义了多个动画，动画会排队等待执行。
- 如果是不同的元素对象都有动画，不会出现排队机制。
- 如果是其他非运动的代码，不会等待运动完成。比如，改变css样式，不会排队。
<style>
div{
width: 100px;
height: 100px;
border: 8px solid #ccc;
position: absolute;
left: 0;
top: 0;
background: url(../../imgs/1.jpg) no-repeat center center;
}
.box2{
border-radius: 50%;
overflow: hidden;
}
div span{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(221, 130, 130, 0.4);
}
</style>
<!-------------css样式------------------->
<body>
<div class="box1"><span></span></div>
<div class="box2"><span></span></div>
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
var $box1 = $(".box1");
var $box2 = $(".box2");
var during = 2000;
//动画排队对比
$box2.animate({"left": 400,"top":400},during)
//box1、box2上各自进行各自的动画
//同一元素上的多个动画排队
$box1.animate({"left": 400},during)//排队
$box1.animate({"top": 400}, during)
// 动画的底部就是一个定时器，异步加载
// 非运动的代码，关于同一个元素对象的，不会排队
//$box1.css("height",200)
</script>
</body>
- 自带动画的显示隐藏方法，如果设置给同一个元素，也有动画排队
//其他的运动方法，如果设置给同一个元素，也会发生排队
$box2.mouseenter(function(){
$(this).children().slideUp(during)
})
$box2.mouseleave(function(){
$(this).children().slideDown(during)
})
//鼠标快速的移上移下，之后box2的灰色span就一直在滑进滑出，直到执行完所有次数
- 同一个元素身上的运动，可以简化成链式调用的方法
//同一个元素进行多个运动，可以简化通过链式调用实现
//但是还是要进行排队
$box1.children().fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)
delay（）延迟方法
- 将delay（）设置在某个运动方法之前，表示后面的运动要在规定的时间之后再执行，有延迟运动的效果
- delay（）的参数是时间的数值，其他的运动方法也有延迟效果
//延迟
$box1.children().delay(3000).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)
stop（）停止动画方法
-
设置元素对象身上的排队的动画以何种方式进行停止
-
stop（）有两个参数，可以得到四种停止方式，参数都是布尔值
• 参数1：设置是否清空后面的动画排队，如果是 true 表示清空(后面还排着的动画也一起被清除掉，不再执行)，如果是 false 表示不清空只停止当前的一个动画（后面的动画立即开始执行）。
• 参数2：设置当前动画是否立即完成，如果是 true 表示立即完成，对象会立刻走到结束位置，如果是 false 表示不完成当前动画，立即停止在当前位置。
<style>
div {
width: 100px;
height: 100px;
border: 8px solid #ccc;
position: absolute;
left: 0;
top: 40;
background: url(../../imgs/1.jpg) no-repeat center center;
}
div span {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(221, 130, 130, 0.4);
}
</style>
</head>
<body>
<input type="button" value="true true" id="btn1">
<input type="button" value="true false" id="btn2">
<input type="button" value="false false" id="btn3">
<input type="button" value="false true" id="btn4"><br>
<div class="box1"><span></span></div>
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
var $box1 = $(".box1");
var during = 2000;
//同一元素上的多个动画排队
$box1.animate({ "left": 400 }, during)
$box1.animate({ "top": 400 }, during)
$box1.animate({"left":0},during)
$box1.animate({"top":40},during)
// 停止动画
//添加按钮点击事件
var $btn1 = $("#btn1")
var $btn2 = $("#btn2")
var $btn3 = $("#btn3")
var $btn4 = $("#btn4")
//true true 清空后面排队动画 且 当前动画立即完成，停到结束位置
$btn1.click(function () {
$box1.stop(true, true);
})
//true false 清空动画 停在当前
$btn2.click(function () {
$box1.stop(true, false);
})
//false false 不清空后面动画，停在当前
//然后执行下一步动画
$btn3.click(function () {
$box1.stop(false, false);
})
//false true 不清空后面动画，当前运动立即到结尾
$btn4.click(function () {
$box1.stop(false, true);
})
</script>
</body>
- 默认情况下，参数值为false
- 实际工作中，一般要求清空后面的排队，停止当前的位置，多使用stop（true），第二个参数不设置默认为false
清空动画排队
动画排队问题
-
如果将开启运动的程序放在一个事件函数中，事件多次被触发，会执行多次函数，就会在一个元素身上添加了多个动画，会进行动画排队。(动画积累问题)
需要去清除排队的动画，进行防骚扰操作。
-
解决方法
方法一：利用stop（）方法
在每一个运动函数之前都增加一个stop（true），表示在运动执行之前，会将前面排队的动画清空，然后停止在当前位置
<style>
div {
width: 100px;
height: 100px;
border: 8px solid #ccc;
position: absolute;
left: 0;
top: 0;
background: url(../../imgs/1.jpg) no-repeat center center;
}
div span {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(221, 130, 130, 0.4);
}
</style>
<body>
<input type="button" value="true true" id="btn1">
<input type="button" value="true false" id="btn2">
<input type="button" value="false false" id="btn3">
<input type="button" value="false true" id="btn4"><br>
<div class="box1"><span></span></div>
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
var $box1 = $(".box1");
var during = 2000;
//清空动画
$box1.mouseenter(function(){
$(this).children().stop(true).slideUp(during)
})
$box1.mouseleave(function(){
$(this).children().stop(true).slideDown(during)
})
</script>
</body>
方法二：利用函数节流方法
如果元素在运动，直接return，不要执行后面的运动代码。
每个jQuery对象，都能调用一个is（）方法，作用是显示元素对象的某种状态
如果参数位置是is("：animated")，animated是正在运动的意思，返回值是布尔值，true表示正在运动，false表示没有运动
//函数节流方法
$box1.mouseenter(function(){
if(is(":animated")){
//如果判断是正在运动的话，直接return返回，不再执行其他动画
return;
}
//没有运动的话，则继续执行后面的新动画
$(this).children().slideup(during);
})
$box1.mouseenter(function(){
if(is(":animated")){
//如果判断是正在运动的话，直接return返回，不再执行其他动画
return;
}
//没有运动的话，则继续执行后面的新动画
//有时候为了保险起见，会与stop（true）结合使用
$(this).children().stop(true).slideup(during);
})
-
有时候为了保险起见，函数节流使用时，也会与stop（true）结合使用
-
stop（true）和函数节流方法，这两种解决动画积累问题的方法还是有区别的。stop方法可以使停止时，停在当前的位置，而函数节流，停止时return返回后，当前所处的动画一般都是会执行完的。
