jquery 슬라이드 애니메이션이 동기화되지 않습니다.

Question

현재 일부 텍스트가 포함 된 회전식 슬라이드 슬라이더가 있습니다. 사용자가 '다음'버튼을 클릭하면 .carousel-text div가 텍스트를 숨기는쪽으로 올라가고 슬라이드가 다음 슬라이드로 이동하면 다음 슬라이드의 .carousel-text가 슬라이드되어 텍스트가 표시됩니다.

이 방법은 시간 문제가 있지만 시간이 오래 걸리는 경우가 있는데 회전식 문구가 이동하기 전에 텍스트가 위아래로 움직입니다. 전 시퀀스가 ​​완료되기 전에 다음 버튼이 클릭되기 때문에 이것이라고 가정합니다 (모든 작업에는 2 초가 소요됩니다). 다시 호출되기 전에 모든 것이 완료되었는지 확인할 수있는 방법이 있습니까?

jQuery("#arrow-right").click(function() { 

    jQuery('.carousel-text').animate({ 
     marginTop: "-260px" 
     }, 500, function() { 
      jQuery('.carousel-inner').animate({ 
       marginLeft: "-700px" 
       }, 1000, function() { 
        jQuery('.carousel-text').animate({ 
         marginTop: "0px" 
         }, 500, function() { 
          // Animation complete. 
         });   
       }); 
    }); 
} 

편집 : 당신이 애니메이션 http://jsfiddle.net/UGE44/

Answer 1

놓습니다 "(참 참) .stop"전에 : 그냥 여기 jsfiddle했다. 이렇게하면 이전 애니메이션이 중지되고 새 애니메이션이 동시에 시작됩니다.

jQuery('.carousel-text').stop(true, true).animate({ 
     marginTop: "-260px" 
     }, 500, function() { 
      jQuery('.carousel-inner').stop(true, true).animate({ 
       marginLeft: "-700px" 
       }, 1000, function() { 
        jQuery('.carousel-text').stop(true, true).animate({ 
         marginTop: "0px" 
         }, 500, function() { 
          // Animation complete. 
         });   
       }); 
    }); 

세 곳 모두있을 필요는 없으므로 이전에 배치 한 애니메이션을 가지고 놀고 싶을 수도 있습니다.

Answer 2

애니메이션을 적용하기 전에 "애니메이션"플래그를 설정하고 애니메이션이 완료되면 지 웁니다. // jsfiddle :

jQuery("#arrow-right").click(function() { 

    var $text = jQuery('.carousel-text'); 

    if ($text.data('animating') !== true) { 

     $text.data('animating', true) 
      .animate({ 
      marginTop: "-260px" 
     }, 500, function() { 
      jQuery('.carousel-inner').animate({ 
       marginLeft: "-700px" 
       }, 1000, function() { 
        jQuery('.carousel-text').animate({ 
         marginTop: "0px" 
         }, 500, function() { 
          $text.data('animating', false); 
          // Animation complete. 
         });   
       }); 
     }); 


    } 

}