jQuery fadeTo（）不會由於appendTo（）完成而退色

Question

我在下面看到一些代碼，它爲我的網站創建了輪播效果。我遇到的問題是原始的fadeTo()實際上並沒有消失，而是等待淡出時間完成，然後跳到下一個位。 （見下面的小提琴）。

JSFIDDLE

的jQuery：

function next(ul) { 
    ul.find("li:first-child").fadeTo(100, 0, function() { 
     ul.find("li:first-child").appendTo(ul); 
     ul.find("li:last-child").hide(); 
     ul.find("li:last-child").fadeTo(500, 0.4); 
    }); 
} 

HTML：

<div class="carousel-container"> 
     <button class="prev"><</button> 
     <div class="carousel"> 
      <ul> 
       <li style="background-color: #333333">FIRST</li> 
       <li style="background-color: #444444">SECOND</li> 
       <li style="background-color: #555555">THIRD</li> 
       <li style="background-color: #666666">FOURTH</li> 
       <li style="background-color: #777777">FIFTH</li> 
      </ul> 
     </div> 
     <button class="next">></button> 
    </div> 

見fiddle的CSS（有不少）。

這個問題與jQuery ul.find("li:first-child").appendTo(ul);的第二行有關，如果我刪除了這個，那麼淡入淡出效果很好，但是輪播沒有。

我願意接受其他建議，以便我可以如何做旋轉木馬。這只是我腦海中的第一種方法。

Answer 1

您淡入一個元素並同時移動它，嘗試在100ms的settimeout中引起問題的附加行。