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/

如何防止JavaScript多次应用鼠标悬停事件

3 个答案: