Javascript幻燈片淡入淡出的問題 - 不是無縫的

Question

當淡入淡出時，更改內容框，而不是無縫的圖像顯示如下 - 它應該在新圖像顯示之前淡出...不知道發生了什麼。

http://jsfiddle.net/ucswr/

$("#aboutslideshow > div:gt(0)").hide(); 

setInterval(function() { 
$('#aboutslideshow > div:first') 
.fadeOut(1000) 
.next() 
.fadeIn(1000) 
.end() 
.appendTo('#aboutslideshow'); 
}, 4200); 

Answer 1

使用淡出的完整的回調，這樣的下一個項目淡入另一個已經淡出之後。您看到的行爲的原因是由於淡入淡出功能的異步性質。使用您的代碼片斷，它將啓動fadeout和fadeIn，而不會完成先前的動畫。

var $slideContainer = $("#aboutslideshow"); 
$slideContainer.children("div:gt(0)").hide(); 

setInterval(function() { 
    $slideContainer.children('div:first') 
     .fadeOut(1000, function() { 
     $(this).next() 
      .fadeIn(1000) 
      .end() 
      .appendTo($slideContainer); 
    }) 

}, 4200); 

Demo