Jquery 悬停动画未完成

以下是一把小提琴，用于说明：

    <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>

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>

    <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>

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

    <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>

    <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>

我必须检索此元素的边距顶部值，才能恢复到mouseleave上的位置（边距顶部将从一个.两个变为另一个）

    <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>

我明白这是个棘手的问题，除非我完全错过了什么

    <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>

---

谢谢

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

    <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>

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

---

我认为问题在于每次出现悬停时我都会检索边距顶部，我应该只存储第一个实例。