Как предотвратить JavaScript от применения события mouseover несколько раз

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: NONE!

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/