javascript - JS .fadeOut 没有正确淡出

Question

试图让图像淡出得更慢，但它似乎只是立即淡出，然后在加载新图像时留下空白。

HTML

<div class="fadein">
   <!--<img src="images/me.jpg" alt="" /> -->
   <img src="images/boatResized.jpg" alt="" />
   <img src="images/carResized.jpg" alt="" />
   <img src="images/dennis_stockRezied1.jpg" alt="" />
</div>

JS

$('.fadein img:gt(0)').hide();

setInterval(function () {
    $('.fadein :first-child').fadeOut(4500)
        .next('img')
        .fadeIn(5500)
        .end()
        .appendTo('.fadein');
}, 8000); // 8 seconds

我是 JS 的新手，很难让它正常运行。

Answer 1

主要问题是您对 .fadeIn() 的调用不会等待 .fadeOut() 完成，因为它们是在不同的元素上调用的(因此属于不同的动画队列)。您可以添加一个完成回调函数作为 .fadeOut() 的第二个参数，然后在该函数内执行 .fadeIn()。

另请注意，您使用的是 8 秒间隔，但渐变时间为 4.5 秒和 5.5 秒，加起来就是 10 秒的周转时间。因此，在下面的代码中，我将间隔增加到 11。我尝试尽可能少地更改您的代码:

setInterval(function () {
    $('.fadein :first-child').fadeOut(4500, function() {
        $(this).next('img')
               .fadeIn(5500)
               .end()
               .appendTo('.fadein');
    });
}, 11000);

演示:http://jsfiddle.net/qh03e16s/

您也可以去掉 setInterval()，而是从 .fadeIn() 的完成回调中触发每个淡入淡出序列。然后你不必担心时间间隔加起来淡出和淡入，虽然这意味着第一个淡入淡出立即开始:

(function doFade() {
    $('.fadein :first-child').fadeOut(4500, function() {
        $(this).next('img')
               .fadeIn(5500, doFade)  // note the doFade reference
               .end()
               .appendTo('.fadein');
    });
})();

演示:http://jsfiddle.net/qh03e16s/1/