jQuery анимация для зависания

Question

Я пытаюсь анимировать логотип, когда вы наведите указатель мыши на элемент привязки. Когда я нависаю над логотипом, изображение должно идти вверх, а другое - вниз, когда первый выполняется. Когда мышь уходит, он должен наоборот, текущий элемент (2-й) должен идти вверх, а когда он ушел, первый элемент должен идти вниз.

Я знаю, как оживить это, однако у меня возникают проблемы, когда я нахожусь очень быстро над моим опорным элементом. Иногда оба изображения (1 2nd появляются) и т. Д.

Это то, что у меня уже есть, как я должен делать это правильно?

function logoAnimation() { 
var logo = jQuery('#logo a'); 
var house = jQuery('#logo_icon_house'); 
var brush = jQuery('#logo_icon_brush'); 

var inHandler = function() { 
    logo.unbind('mouseleave', outHandler); 
    brush.animate({ 
     "top": "-27px" 
    }, 250, function(){ 
     house.animate({ 
      "top": "42px" 
     }, 250,function(){ 
      logo.bind('mouseleave', outHandler); 
     }); 
    } 
    ); 
} 
var outHandler = function() { 
    logo.unbind('mouseenter', inHandler); 
    house.animate({ 
     "top": "-21px" 
    }, 250, function() { 
     brush.animate({ 
      "top": "39px" 
     }, 250,function(){ 
      logo.bind('mouseenter', inHandler); 
     }); 
    }); 
} 

logo.mouseenter(inHandler).mouseleave(outHandler); 
} 

после правильного ответа на мой вопрос, мне удалось решить эту проблему с помощью следующего кода:

function logoAnimation() { 
var logo = jQuery('#logo a'); 
var house = jQuery('#logo_icon_house'); 
var brush = jQuery('#logo_icon_brush'); 

var inHandler = function() { 
    if(brush.is(':animated')) { 
     return; 
    } 
    brush.stop(true,true).animate({ 
     "top": "-27px" 
    }, 250, function(){ 
     if(house.is(':animated')) { 
      return; 
     } 
     house.animate({ 
      "top": "42px" 
     }, 250); 
    } 
    ); 
} 
var outHandler = function() { 
    house.stop(true,true).animate({ 
     "top": "-21px" 
    }, 250, function() { 
     if(brush.is(':animated')) { 
      return; 
     } 
     brush.animate({ 
      "top": "39px" 
     }, 250); 
    }); 
} 

logo.mouseenter(inHandler).mouseleave(outHandler); 
} 

Answer 1

Вы либо должны вызывать .stop(true, true) перед вызовом .animate() (в цепи), или вы могли бы создайте некоторый оператор вроде.

brush.stop(true, true).animate({}); // ... 

Это гарантирует, что все анимации останавливаются на brush перед началом нового. Параметры .stop() - это «CleartQueue» и «JumpToEnd».

if(!brush.is(':animated')) {} 

Это гарантирует, .animate() только вызывается, если нет анимации в настоящее время не происходит.

Ref .: .stop(), :animated