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