哈弗動畫未完成

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