jQuery .stop() 콜백 문제

Question

다른 애니메이션의 콜백으로 애니메이션을 트리거하려고합니다. 첫 번째 애니메이션이 완료되면 두 번째 애니메이션이 시작되고, .stop() 함수가 작동하는 방식은 읽은 것에서 시작됩니다. 그러나 컴파일 된 코드에서 두 번째 애니메이션은 첫 번째 애니메이션이 완료되지 않은 경우에도 실행됩니다.

$(document).ready(function(){ 
    var angle = 0; 

    function arrowRotate() { 
     angle +=180; 
     $('#arrow img').stop().rotate({ 
      animateTo: angle, 
     }, 100); 
    }; 

    function ToggleOpen(heightValue) { 
     $('#information').stop().animate({ 
      height : heightValue, 
     }, 1500, 'easeOutExpo', function(){ 
      arrowRotate(); 
     }) 
    }; 

    $('#information_container').hover(function(){ 
     ToggleOpen(500); 

    }, function(){ 
     ToggleOpen(0); 
    }); 

    $('#arrow img').click(function(){ 
     ToggleOpen(0); 
    }); 

}); 

나는이 타사 플러그인을 사용하고 있습니다 : 그러니까 기본적으로 나는이 달성하기 위해 노력하고있어 http://hopeandpurpose.org

: http://code.google.com/p/jqueryrotate/이

여기에 라이브 구현의를 여기

코드입니다 마우스를 올리면 div의 높이가 올라가고 이미지를 완료하면 div가 회전합니다. 문제는 높이 애니메이션이 완료되지 않고 div가 0으로 돌아가더라도 이미지가 계속 회전한다는 것입니다.

코드를보고있는 중 지금 내 문제는 아마 그게 떠돌 았던 것 같습니다. 그것은 arrowRotate() 함수를 트리거합니다. arrowRotate() 함수를 래핑하는 함수가 최선의 해결책일까요?

Answer 1

stop(true)을 사용하여 애니메이션을 중지하고 요소에서 실행 대기중인 대기중인 애니메이션을 모두 지우십시오.

여기에 example fiddle입니다. 높이가 축소되기 전에 마우스를 떼면 해당 애니메이션이 마우스 리브 핸들러에서 stop(true)에 의해 지워지기 때문에 애니메이션이 실행되지 않습니다.