Javascript JQuery动画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（）解决方案更好，但是动画会从任何位置跳到结尾。如果鼠标在动画中离开容器，动画是否可以停止并以另一种方式返回动画

下面是一个JSFIDLE，其中包含该网站的简化版本。容器位于导航栏下方的任何位置

使用.stop（）

---

这类问题应该总是伴随着一个好的答案，我会记住的。谢谢，我不知道JS小提琴。谢谢。我抬起头，停下来，发现我需要它是真的，是假的

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