jquery幻燈片動畫不同步

Question

我目前有一個包含一些文本的傳送帶滑塊。當用戶點擊「下一個」按鈕時，文件夾上的.carousel文本將隱藏文本，轉盤移動到下一張幻燈片，然後下一張幻燈片上的.carousel文本向下滑動以顯示文本。

這在某些時候可以正常工作，但有時會出錯，文本會在旋轉木馬繼續移動之前上下滑動。我假設這是因爲在整個序列完成之前單擊下一個按鈕（整個過程需要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

動畫製作完成之前設置「動畫」標誌並在動畫完成時將其清除。

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


    } 

}