在添加新內容時使用動畫時出現jQuery問題

Question

當我嘗試點擊右側的「下一步」按鈕時，會出現問題。我的div開始滑動，但是當我敲了幾次butt後，我開始看到div之間的空白空白。這不會發生。這怎麼能解決。 我提供了一個鏈接到jsfiddle。

var x = ["blue", "red", "black", "green", "orange"]; 
    var i = 0; 
    $(document).ready(function(){ 


     $("#right").click(function(){ 
      if (i === x.length) { 
      i = 0; 
      } 

      $(".slide2:last-child").after("<div class='slide2' style='background-color:" + x[i] + ";'></div>"); 
      $(".slide2").animate({right:'+=100%'}, 1000); 
      //$(".slide2:last").remove(); 



      i++;   
     }); 
    }); 

Answer 1

這基本上是因爲您要爲每張幻燈片單獨製作動畫。

如果包裝內的另一個你的元素，和動畫只有這一個，而不是，你就會有一個比較一致的動畫：

HTML：

<div id="three"> 
    <span id="left"><</span> 
    <span id="right">></span> 
    <div class='container'> 
     <div class="slide2"></div> 
     <div class="slide2" style="background-color:olive;"></div> 
    </div> 
</div> 

JS：

var x = ["blue", "red", "black", "green", "orange"]; 
var i = 0; 
$(document).ready(function(){ 
    $("#right").click(function(){ 
     if (i === x.length) { 
      i = 0; 
     } 
     $(".slide2:last-child") 
      .after("<div class='slide2' style='background-color:" + x[i] + ";'></div>"); 
     $(".container") 
      .animate({left:(-i*100)+'%'}, 1000); 
     i++;   
    }); 
}); 

更新JSFiddle。