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 的完整回调，以便下一项仅在另一项淡出后才淡入。您所看到的行为的原因是淡入淡出函数的异步性质。通过您的代码片段，它会启动 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