jQuery：在淡入淡出之前刷新 DIV

Question

我是 jQuery 的初学者，我正在尝试让我在 DIV 之间的淡入淡出按照我的意愿工作。但是，我遇到了问题。我希望脚本在它消失之前完全刷新我动态加载到我的 DIV 中的内容。这样我就知道显示的内容是最新的，并且我会避免任何闪烁的内容，因为它会在 DIV 淡入后刷新。

这是我的代码；

$(window).load(function(){
var divs = $('.fade');

function fade() {
    var current = $('.current');
    var currentIndex = divs.index(current),
        nextIndex = currentIndex + 1;
    if (nextIndex >= divs.length) {
        nextIndex = 0;
    }
    var next = divs.eq(nextIndex);
    next.stop().fadeIn(3000, function() {
        $('#div1').load('div1.php');
        $('#div2').load('div2.php');
        $('#div3').load('div3.php');
        $('#div4').load('div4.php');
        $('#div5').load('div5.php');
        $(this).addClass('current');
    });
    current.stop().fadeOut(3500, function() {
        $(this).removeClass('current');
        setTimeout(fade, 60000);
    });
}
fade();
});

那么如何在淡入下一个 DIV 之前刷新下一个 DIV？

Answer 1

在 jQuery 中，fadeIn() 的工作方式如下：

$('element').fadeIn(3000, function() {
    /* code to be executed AFTER the fade animation */
})

$.fadeOut(); 也一样

所以您需要插入所有内容，然后才调用$.fadeIn(3000); 方法。

它应该看起来像这样：

HTML：

<div class="fade current">
    <div id="div1">Content 1</div>
    <div id="div2">Content 1</div>
    <div id="div3">Content 1</div>
    <div id="div4">Content 1</div>
    <div id="div5">Content 1</div>
</div>
<div class="fade">
    <div id="div1">Content 1</div>
    <div id="div2">Content 1</div>
    <div id="div3">Content 1</div>
    <div id="div4">Content 1</div>
    <div id="div5">Content 1</div>
</div>
<div class="fade">
    <div id="div1">Content 1</div>
    <div id="div2">Content 1</div>
    <div id="div3">Content 1</div>
    <div id="div4">Content 1</div>
    <div id="div5">Content 1</div>
</div>

Javascript：

$(document).ready(function () {
    var divs = $('.fade');

    setInterval(fade, 5000);

    function fade() {

        var current = $('.current');

        var currentIndex = divs.index(current);

        var next = $(divs[currentIndex + 1]);

        current.removeClass('current');
        next.addClass('current');

        $(current).fadeOut(1000, function () {
            $(this).children('#div1').load('div1.php');
            $(this).children('#div2').load('div2.php');
            $(this).children('#div3').load('div3.php!');
            $(this).children('#div4').load('div4.php');
            $(this).children('#div5').load('div5.php', function () {
                $(this).parent().fadeIn(1000);
            });
        });
    }
});

在我的 Chrome 浏览器上对此进行了测试。它每 5 秒循环和更新每个 div。

这是一个新的 JSFiddle： LINK

如果这不是你所需要的，你可以从那里开始工作:)