jQuery的CSS功能不完整的動畫工作處理

Question

這裏是js代碼：

var index=0; 
function reset(){ 
    for(var i=0;i<count+2;i++){ 
     $(imgs[i]).css("left",width*(i-1-index)); 
    } 
} 
reset(); 
//$(".dcCarousel").swipeleft(function(){ 
$("#left").click(function(){ 
    index = index+1; 
    for(var i=0;i<count+2;i++){ 
     $(imgs[i]).animate({"left":width*(i-1-index)}, complete=function(){ 
      if(index>=count) { 
       index = 0; 
       //$(this).delay(0,reset); 
       reset(); 
      } 
     }); 
    } 
}); 

第一次復位被調用時，它被執行，左屬性已分配正確的價值觀。但是當我在animate（）的完整處理程序中調用它時，左側的屬性值仍然像動畫之後。爲什麼是這樣？以及如何解決這個問題？

順便說一句，我正在實施的是一個圓形傳送帶。我克隆了頭部和尾部的img，並將它們添加到imgs的結尾和開頭，我希望在滾動到結尾後動畫結束後，我更改css attr以顯示第一個img。這種方法有什麼問題嗎？

請不要建議其他旋轉木馬小部件，我需要寫我自己的。謝謝！

Answer 1

以您目前的代碼，你將有很多的動畫運行，並率先完成將嘗試而其他動畫運行重置CSS。未完成的動畫將覆蓋重置功能更改。

來解決這個問題，也許你可以試試

var animationCount = 0; 
var index=0; 
function reset(){ 
    for(var i=0;i<count+2;i++){ 
     $(imgs[i]).css("left",width*(i-1-index)); 
    } 
} 
reset(); 
$("#left").click(function(){ 
    index = index+1; 
    animationCount = count + 2; 
    for(var i=0;i<count+2;i++){ 
     $(imgs[i]).animate({"left":width*(i-1-index)}, complete=function(){ 
      if (index >= count) { 
       animationCount -= 1; 
       if (animationCount == 1) { 
        index = 0; 
        reset(); 
       } 
      } 
     }); 
    } 
}); 

Answer 2

index = index+1; 
    for(var i=0;i<count+2;i++){ 

必須喜歡這個

for(var i=0;i<count+2;i++){ 
    index = index+1;