导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

侧边栏
最新评论
广树管理员
2025-02-18 08:56
@Zrzzz:没想到大佬也有电磁炮的青春!撤回可以复制编辑原文算是常规操作🤭
Zrzzz
2025-02-18 08:54
@广树:是滴!学生仔的时候喜欢,一晃好几年了,话说我发现维基萌撤回的时候甚至可以复制回复原文……手残党福音
广树管理员
2025-02-18 08:52
@Zrzzz:电磁炮也是大佬的有生之年?
Zrzzz
2025-02-17 23:34
🥺🥺🥺🥺🥺我的有生之年 没想到大佬在维基萌上也更了
广树管理员
2025-02-17 18:52
@ZeroCounter:玩家群体应该还是挺多的,可能是因为年龄层的原因?就是我们已经...
正在攻略

logo_kai.jpg


PSN奖杯卡

PSN奖杯卡

赞助商广告

【jQuery】如何使用stop()来防止animate()的重复动画

作者:广树时间:2016-02-27 14:03:20分类:JavaScript

在使用jQuery的.animate()的时候经常会遇到鼠标重复划过导致动画重复播放的问题。
这个时候就要用到stop([clearQueue], [gotoEnd])来阻止重复动画。
那么如何科学使用stop()来阻止重复动画呢?下面就举五个例子。



例1:无stop()的情况下:

$(this).animate();


  •  
  •  
  •  

如例子所示,在没有stop()的情况下,会随着鼠标划过的次数进行重复动画。



例2:stop(false, false)或者stop()

$(this).stop().animate();


  •  
  •  
  •  

默认为false,可以看到鼠标离开的一瞬间动画停止,但因为 [clearQueue]也是flase,所以会直接进入了下一步动画。动画的重复也仍旧还在。



例3:stop(false, true)

$(this).stop(false, true).animate();


  •  
  •  
  •  

[gotoEnd]为true,所以当鼠标离开后直接触发了最后的状态,然后直接运行了下面的高度变化的动画。但仍旧会重复动画。



例4:stop(true, false)

$(this).stop(true, false).animate();


  •  
  •  
  •  

[gotoEnd]为false,所以鼠标移开的一瞬间动画直接停止。同时 [clearQueue]为true,所以本应该执行的下一步高度变化的动画直接被清除,直接跳转播放鼠标移开后的动画。



例5:stop(true, true)

$(this).stop(true, true).animate();


  •  
  •  
  •  

两个值都为true的情况下,鼠标移开后动画直接播放到最终状态,同时[clearQueue]为true,所以本应该执行的下一步高度变化的动画直接被清除,直接跳转播放鼠标移开后的动画。



参考网址:http://www.kantenna.com/pg/2010/01/jqueryjquery_stop.php


donate.png

1210 x 50(蓝底).png

cloudcone