jQuery: Refreshing DIV before fading

Question

I'm a beginner in jQuery and I'm trying to get my fade between DIVs to work as I want. However, I'm running into problems. I want the script to completely refresh the content I'm loading dynamically into my DIV before it fades. This way I know the content displayed are current and I will avoid any flashes of the content because it's refreshed after the DIV has faded in.

Here is my code;

$(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();
});

So how can I make the next DIV be refreshed BEFORE the fade into the next DIV?

Answer 1

In jQuery, fadeIn() works like this:

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

It is the same for $.fadeOut();

So you need to insert all your content and only after that call the $.fadeIn(3000); method.

It should look something along these lines:

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);
            });
        });
    }
});

Tested this on my Chrome browser. It cycles and updates every div one by one every 5 seconds.

Here's a new JSFiddle: LINK

If this is not exactly what you need, you can work your way from there :)