jquery - jquery: combine animations to start and stop together

Question

I need some help to do this...:

this is my code so far:

for (var i = 0; i < 11; i++) {
                jQuery(function ($) {
                    $(window).queue(function (n) {
                        $('#red').fadeTo('fast', 0).fadeTo('fast', 1, n);
                    }).queue(function (n) {
                        $('#blue').fadeTo('fast', 0).fadeTo('fast', 1, n);
                    }).queue(function (n) {
                        $('#green').fadeTo('fast', 0).fadeTo('fast', 1, n);
                    }).queue(function (n) {
                        $('#yellow').fadeTo('fast', 0).fadeTo('fast', 1, n);
                    });
                });
            }

what this code is doing at this moment is that the #red div fades out, then fades in and so on... what I need is the 4 div's to do this: #red, needs to fadeout and then as he fadesin, the next div needs to start fadeout... can someone please help me with that?

Answer 1

使用fadeTo回调函数。

for (var i = 0; i < 11; i++) {
    jQuery(function ($) {
        $(window).queue(function (n) {
            $('#red').fadeTo('fast', 0, function(){
                $(this).fadeTo('fast', 1);
                $('#blue').fadeTo('fast', 0, function(){
                    $(this).fadeTo('fast', 1);
                    $('#green').fadeTo('fast', 0, function(){
                        $(this).fadeTo('fast', 1);
                        $('#yellow').fadeTo('fast', 0, function(){
                            $(this).fadeTo('fast', 1, n);    
                        });
                    });                
                });
            });                 
        });
    });
}

http://jsfiddle.net/YCM9f/