哈弗动画未完成

Question

这里是为了说明一个小提琴： 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'); 
}); 

预期的行为是当鼠标悬停在行上时，黄色矩形向上移动，并在鼠标离开行时向下移动到其原始位置。但是，如果将指针从一条红线快速移动到另一条红线，您会发现黄色框逐渐抬起，直到它碰到线的顶端。

我需要检索该元件的上边距值，以便能够恢复到上鼠标离开那个位置

I（所述边距将从一个。二变化到另一个）明白这是一个棘手的问题，除非我完全错过了一些东西。

谢谢！

Answer 1

这个问题可能是要保存在一个共享的全局变量的旧值，使用.data() API，而不是保存以前的valud

$('.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'); 
});