温氏效应

在使用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元素不是正在执行动画的时候执行的代码即可。

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