jquery - 悬停动画未完成

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

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

我必须检索此元素的 margin-top 值才能在 mouseleave 上恢复到该位置（margin-top 将从一个 .two 变化到另一个）

我知道这很棘手，除非我完全错过了一些东西。

谢谢！

Answer 1

问题可能是您将旧值保存在共享全局变量中，请改用.data() api 来保存以前的值

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