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/

JS .fadeOut没有正确消失

1 个答案: