JS .淡出淡出不正确

JS .fadeOut not fading correctly

本文关键字：淡出 不正确 JS      更新时间：2023-09-26

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

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/

相关文章：