2022年03月23日   温氏效应   125 次浏览   暂无评论  

在使用jQuery制作页面效果的过程中经常会遇到,如果使用了:fadeIn()、fadeOut()、fadeToggle()、 fadeTo()、slideDown()、slideUp()、slideToggle()以及animate()等动画事件效果的时候,会出现动画重复的问题。就比如:做了一个菜单,鼠标移动到指定元素上,执行动画效果,移出则结束动画效果,看似没问题,但如果鼠标多次移入移出,那么问题就来了,动画会不停的执行。要怎么解决呢?我也是在万能的物联网上搜索了一大圈儿才总结的这个解决办法,希望能帮到更多朋友!

使用 .is(':animated')来判断元素是否处于动画状态。

原始JS:

  $("button").click(function() {
    $("div").slideToggle();
  });

如果只是单纯的这样写,鼠标重复移入移出 button必然会出现动画重复的现象,这时我们只需要加一句判断,判断动画是否处于停止状态,修改后如下:

  $("button").click(function() {
    if(!("div").is(':animated')){
      $("div").slideToggle();
    }    
  });

通过判断 div元素不是正在执行动画的时候执行的代码即可。

好吧,每当问题解决后发现,其实就是这么简单。

共有 0 条评论

发表评论