JQuery animate div 항목

Question

메인 콘텐츠가 포함 된 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입니다. 컨테이너는 navbar 아래에 있습니다. 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); 
});