这篇文章主要介绍了jQuery的animate动画方法及动画排队问题解决的相关资料,帮助大家更好的理解和学习使用jQuery,感兴趣的朋友可以了解下
animate()动画方法
- 作用:执行css属性集的自定义动画
- 语法:$(selector).animate(styles,speed,easing,callback)
• 参数1: css 的属性名和运动结束位置的属性值的集合。
• 参数2:可选,规定动画的速度,默认是 "normal"。其他值,“slow”、“normal”、“fast”,数字格式,单位为毫秒。
• 参数3:可选,规定在不同的动画点中设置动画速度的 easing 函数,值包含 swing(变速) 和linear(匀速)。
• 参数4:可选,animate 函数执行完之后,要执行的回调函数。
• 注意:
①所有有数值的属性值都可以运动;
②其他的运动方法比如 slideUp() 等,也有参数3 和参数4
1
2
3
4
5
6
7
8
动画排队
- 同一个元素对象身上,如果定义了多个动画,动画会排队等待执行。
- 如果是不同的元素对象都有动画,不会出现排队机制。
- 如果是其他非运动的代码,不会等待运动完成。比如,改变css样式,不会排队。
- 自带动画的显示隐藏方法,如果设置给同一个元素,也有动画排队
//其他的运动方法,如果设置给同一个元素,也会发生排队 $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 表示不完成当前动画,立即停止在当前位置。
- 默认情况下,参数值为false
- 实际工作中,一般要求清空后面的排队,停止当前的位置,多使用stop(true),第二个参数不设置默认为false
清空动画排队
动画排队问题
- 如果将开启运动的程序放在一个事件函数中,事件多次被触发,会执行多次函数,就会在一个元素身上添加了多个动画,会进行动画排队。(动画积累问题)
需要去清除排队的动画,进行防骚扰操作。
- 解决方法
方法一:利用stop()方法
在每一个运动函数之前都增加一个stop(true),表示在运动执行之前,会将前面排队的动画清空,然后停止在当前位置
方法二:利用函数节流方法
如果元素在运动,直接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返回后,当前所处的动画一般都是会执行完的。
以上就是详解jQuery的animate动画方法及动画排队问题解决的详细内容,更多请关注0133技术站其它相关文章!