javascript - JS .fadeOut无法正确褪色

尝试使图像渐渐淡出，但似乎只是瞬间消失，因此在加载新图像时，我留有空白。

的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的新手，无法正常工作。

最佳答案

主要问题是对.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/

关于javascript - JS .fadeOut无法正确褪色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32365268/