javascript - 如何防止 JavaScript 多次应用 mouseover 事件

Question

我在测试mouseover事件时发现了一个问题。在下面的示例中，有一个图像，当您将其悬停时，它会变大，当鼠标移开时，它会恢复正常大小，但是当您将鼠标快速通过它多次时，它会变得越来越小好几次，就好像它已经记住了鼠标在其上的每一次通过并一遍又一遍地播放动画。

这是一个活生生的例子：Here 继续快速移动鼠标在图像上然后将鼠标移开，你会看到。

Answer 1

使用.stop()：

$(this).stop().animate({width: "200px"}, 'fast');

http://jsfiddle.net/bR5cm/2/

Answer 2

请允许我向您介绍 CSS3，让 jQuery 过时的东西：Demo

HTML：

<img src="......./Smiley.png" alt="smile" id="imgSmile" />

CSS：

#imgSmile {
    width:200px;
    transition:width 0.4s ease;
}
#imgSmile:hover {
    width:250px;
}

JS：没有！

Answer 3

您可以在制作动画时添加一个类，并在动画完成后将其移除，并且仅当该类未应用于元素时才应用新动画。例子：

 $(document).ready(function(){
       $('#imgSmile').width(200);
       $('#imgSmile').mouseover(function()
       {
           if(!$(this).hasClass('animating')){
              $(this).css("cursor","pointer");
              $(this).addClass('animating');
               $(this).animate({width: "250px"}, 'slow',function(){
                    $(this).removeClass('animating');
               });
           }
       });

    $('#imgSmile').mouseout(function()
      {   
          $(this).animate({width: "200px"}, 'slow');
       });
   });

演示：http: //jsfiddle.net/bR5cm/3/