javascript - JQuery 动画 div 条目

Question

我有一个带有包含主要内容的 div 容器的网页，其中有一个 div，当我将鼠标放在容器中时应该会出现该 div。这是我尝试过的代码：

var running=0;
                var running2=0;
                $('div.container').mouseenter(function() 
                {
                    if (running==0) 
                    {
                        running=1;
                        $('div.rightcontainer').css("margin-right",-350)
                        .animate({marginRight:0}, 750, function(){running=0;});
                    }
                }
                );



                $('div.container').mouseleave(function() {
                    if (running2==0) {
                    running2=1;
                    $('div.rightcontainer').css("margin-right",0)
                    .animate({marginRight:-350}, 750, function(){running2=0;});
                    }
                });

此代码有效：

$('div.container').mouseenter(function() {
                    console.log('trigger');
                    $("div.rightcontainer")
                    .css("visibility","visible")
                    .css("margin-right",-$("div.rightcontainer").width())
                    .animate({
                        marginRight:0
                    }, 1200); 
                });

                $('div.container').mouseleave(function() {
                    console.log('leave');
                    $("div.rightcontainer")
                    .css("visibility","visible")
                    .css("margin-right", "320") 
                    .animate({
                        marginRight:-350
                    }, 1200);
                });

但是，问题是，如果鼠标多次进入，对象不断进出。

编辑：

.one() 只执行一次，我的意思是它堆叠所有进入和退出并多次执行动画。

.stop() 解决方案更好，但是动画会从任何地方跳到最后。如果有办法，如果鼠标在动画中间离开容器，让动画停止它所在的位置并以另一种方式动画回来？

这是一个带有简化版网站的 JSFiddle。容器是导航栏下方的任何内容。http://jsfiddle.net/yEzXp/

Answer 1

使用 .stop()

$('div.container').mouseenter(function() {
    $("div.rightcontainer")
    .stop(true, true)
    .css("visibility","visible")
    .css("margin-right",-$("div.rightcontainer").width())
    .animate({
        marginRight:0
    }, 1200); 
});

$('div.container').mouseleave(function() {
    $("div.rightcontainer")
    .stop(true, true)
    .css("visibility","visible")
    .css("margin-right", "320") 
    .animate({
        marginRight:-350
    }, 1200);
});