jQuery動畫回調未按順序觸發

Question

var slideWidth = $('#carousel #slideContainer .slide').width(); 
var slidePos = (($('ul#carousel_nav li').index(this)) * slideWidth); 
slidePos = Math.abs(slidePos) * -1; 

$('#carousel #slideContainer .slide .slideContents').stop(); 
$('#carousel #slideContainer').stop(); 

    $('#carousel #slideContainer .slide .slideContents').fadeOut(500, function() 
    { 
     $('#carousel #slideContainer').animate({ left: slidePos }, 1000, function() 
     { 
      $('#carousel #slideContainer .slide .slideContents').fadeIn(500); 
     }); 
    }); 

構建具有動畫/回調鏈的jQuery滾動條。點擊一個按鈕時，div '#carousel #slideContainer .slide .slideContents應該淡出，其容器div '#carousel #slideContainer .slide .slideContents移動n個像素（slidePos）

執行動畫回調並不總是在前一個動畫結束時觸發並且整個序列變得脫節？

Answer 1

我看來像什麼pitaj說作品

var slideWidth = $('#carousel #slideContainer .slide').width(); 
var slidePos = (($('ul#carousel_nav li').index(this)) * slideWidth); 
slidePos = Math.abs(slidePos) * -1; 

$('#carousel #slideContainer .slide .slideContents').stop(true); 
$('#carousel #slideContainer').stop(true); 

$('#carousel #slideContainer .slide .slideContents').fadeOut(500, function() 
{ 
    $('#carousel #slideContainer').animate({ left: slidePos }, 1000, function() 
    { 
     $('#carousel #slideContainer .slide .slideContents').fadeIn(500); 
    }); 
});