Question

图片显示在下面，当淡入淡出，更改内容框，而不是无缝时 - 它应该在新图像显示之前淡出...不确定是什么。

$("#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

Javascript幻灯片淡出问题 - 不是无缝的

1 个答案: