Question

function fadeInSubheader() {
    $('#sub1').fadeIn().delay(1000).queue(function() {
        $('#sub2').fadeIn().delay(1000).queue(function() {
            $('#sub3').fadeIn().delay(5000).queue(function() {
                fadeOutSubheader();
            });
        });
    });

}

function fadeOutSubheader() {
    console.log('fading out');
    $('#sub1').fadeOut(function() {
        $('#sub2').fadeOut(function() {
            $('#sub3').fadeOut(function() {
                fadeInSubheader();
            });
        });
    });
}

Its supposed to loop once started. But it will start and the fadeOutSubheader function is called because the console log shows ‘fading out’ like its supposed to but they do not fade out. Any ideas?

PS. The fade out is supposed to happen altogether preferably.

Answer 1

According to the jQery doc for .queue(), when you use .queue(fn), you have to .dequeue() in the function to keep things going properly. You can see it work here: http://jsfiddle.net/jfriend00/Py2hL/.

function fadeInSubheader() {
    $('#sub1').fadeIn().delay(1000).queue(function() {
        $(this).dequeue();
        $('#sub2').fadeIn().delay(1000).queue(function() {
            $(this).dequeue();
            $('#sub3').fadeIn().delay(5000).queue(function() {
                $(this).dequeue();
                fadeOutSubheader();
            });
        });
    });

}

function fadeOutSubheader() {
    console.log('fading out');
    $('#sub1').fadeOut(function() {
        $('#sub2').fadeOut(function() {
            $('#sub3').fadeOut(function() {
                fadeInSubheader();
            });
        });
    });
}

If you really want the fadeOuts to all go together, then replace the fadeOutSubheader() with this to just run them all at once:

function fadeOutSubheader() {
    console.log('fading out');
    $('#sub1, #sub2').fadeOut();
    $('#sub3').fadeOut(fadeInSubheader);
}

This is implemented here: http://jsfiddle.net/jfriend00/BYGpa/