Question

got a problem i need to do something like a fading banner – one div fading out then second div fading in, here’s the code:

$(document).ready(function() {
    setTimeout(function() {
        $('#zeus').fadeOut(1000);
     }, 5000);
    $('#zeuss').hide();
    setTimeout(function(){
        $('#zeuss').fadeIn(1000);
    }, 6000);
});

it works, but after #zeuss fades in then it just stays here. I need to do that repeatedly. And please don’t offer to use .delay() because im on jquery 1.3.2

EDIT.
by default #zeus is shown on the page, i want to fade it out then fade in #zeuss, then again fade in #zeus and then fade out #zeus and fade in #zeuss etc..

Answer 1

As is often the case, a general and extensible solution is simpler:

UPDATE: Took jfriend00’s suggestion and moved from multiple timers to completion function to preclude accumulation errors over time.

/**
 * Fade-cycles elements with class 'banner'
 */
$(document).ready(function() {

    var delay = 3000, fade = 1000; // tweak-able
    var banners = $('.banner');
    var len = banners.length;
    var i = 0;

    setTimeout(cycle, delay); // <-- start

    function cycle() {
        $(banners[i%len]).fadeOut(fade, function() {
            $(banners[++i%len]).fadeIn(fade, function() { // mod ftw
                setTimeout(cycle, delay);
            });
        });
    }

});

• DEMO using jQuery 1.3.2