Question

我是jQuery的初学者，我正试图让DIV之间的淡入淡出按照我的意愿工作。但是，我遇到了问题。我希望脚本能够完全刷新我在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

如果这不是您所需要的，您可以从那里开始工作：）

jQuery：在淡出之前刷新DIV

1 个答案: