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

Question

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

这里是一个生动的例子：Here 保持快速移动鼠标移出和移出图像，然后拿走鼠标，你会看到。

Answer 1

请允许我向您介绍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 2

使用.stop()：

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

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

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/