Hover animation non terminée

Question

est ici un violon à des fins d'illustration: http://jsfiddle.net/wVRtL/

HTML:

<section class="full-w blue"> 
     <div class="container"> 
      <div class="three"></div> 
      <div class="two"></div> 
     </div> 
    </section> 


    <section class="full-w red"> 
     <div class="container"> 
      <div class="two"></div> 
      <div class="three"></div> 
     </div> 
    </section> 

jQuery

$('.full-w').hover(function() { 
    marginTopHero = $(this).find('.two').css("margin-top").replace("px", ""); 
    newMargin = marginTopHero - 50 + "px"; 
    oldMargin = marginTopHero + "px"; 

    $(this).find('.two').stop().animate({ 'margin-top': newMargin }, 'fast'); 
    }, function() { 
    $(this).find('.two').stop().animate({ 'margin-top': oldMargin }, 'fast'); 
}); 

Le comportement attendu est que lorsque vous passez la souris sur la ligne, le rectangle jaune se déplace vers le haut et redescend à sa position d'origine lorsque la souris quitte la ligne. Mais si vous déplacez votre pointeur très rapidement d'une ligne rouge à l'autre, vous verrez que la boîte jaune se soulève progressivement jusqu'à atteindre le sommet de la ligne.

je pour récupérer la valeur de marge-dessus de cet élément pour être en mesure de revenir à cette position sur mouseleave (la marge supérieure variera d'un .deux à l'autre)

I Comprenez que c'est difficile, à moins que je ne manque complètement quelque chose.

Merci!

Answer 1

Le problème pourrait être que vous enregistrez l'ancienne valeur dans une variable globale partagée, utilisez le .data() api au lieu de sauver le valud précédent

$('.full-w').hover(function() { 

    var marginTopHero = $(this).find('.two').css("margin-top").replace("px", ""); 
    var newMargin = marginTopHero - 150 + "px"; 
    $(this).data('oldMargin', marginTopHero + "px") 

    $(this).find('.two').stop().animate({ 'margin-top': newMargin }, 'fast'); 
}, function() { 
    $(this).find('.two').stop().animate({ 'margin-top': $(this).data('oldMargin') }, 'fast'); 
});