Animation jQuery pour un vol stationnaire

Question

J'essaie d'animer un logo lorsque vous survolez l'élément d'ancrage. Lorsque je survole le logo, une image doit monter et une autre vers le bas lorsque la première est terminée. Quand la souris part dans l'autre sens, l'élément courant (2e) devrait aller vers le haut et quand il est parti, le premier élément devrait descendre.

Je sais comment animer cela, mais j'ai des problèmes quand je plane très rapidement au-dessus de mon élément d'ancrage. Parfois les deux images (1er & 2ème apparaissent) etc

c'est ce que j'ai déjà, comment dois-je faire correctement?

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); 
} 

après la réponse à ma question, je réussi à travailler cela avec le code suivant:

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

Soit vous devez appeler .stop(true, true) avant d'appeler .animate() (dans la chaîne) ou vous pouvez créer une déclaration comme.

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

Cela fait que toutes les animations sont arrêtés sur brush avant de commencer un nouveau. Les paramètres de .stop() sont "CleartQueue" et "JumpToEnd".

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

Cela fait que, .animate() n'est appelée si aucune animation actuellement en cours.

Ref .: .stop(), :animated