JQuery animate 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); 
       }); 

然而，問題是，如果鼠標進入多次，對象不斷進入和退出。

編輯：

的。一（）只做一次，我的意思是在某種程度上，它棧所有的進入和退出，並執行許多次的動畫。

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