jQuery FadeOut not working

function fadeInSubheader() {
    $('#sub1').fadeIn().delay(1000).queue(function() {
        $('#sub2').fadeIn().delay(1000).queue(function() {
            $('#sub3').fadeIn().delay(5000).queue(function() {
         开发者_StackOverflow中文版       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.

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/

1. You're not using .dequeue() which is causing problems with your looping. According to the docs, "dequeue basically removes and executes the next function in the queue, letting the sequence continue."
2. To fadeOut all 3 items at once, like you write you want, simply use: $('#sub1,#sub2,#sub3').fadeOut() then to use a call back once for all 3 of those fades use: .promise().done(fadeInSubheader) (see my example below)

Working example

$(function() { // on ready

    // Define functions as local variables
var fadeInSubheader = function() {
    $('#sub1').fadeIn().delay(1000).queue(function() {            
        $('#sub2').fadeIn().delay(1000).queue(function() {
            $('#sub3').fadeIn().delay(5000).queue(function() {
                fadeOutSubheader();
                $(this).dequeue();
            });
            $(this).dequeue();
        });
        $(this).dequeue();
    });

}, 
fadeOutSubheader = function() {
    console.log(++i);
    // since jQuery 1.6 you can use promise / done so that 
    // the callback only happeens once - default is once for each element
  $('#sub1,#sub2,#sub3').fadeOut(1000).promise().done(fadeInSubheader);        
}, i=0;

    // Let's start the loop!
    fadeInSubheader();

});