Question

I have a problem. I am new to jQuery, and do not understand how can I repeat of my created animation. Here example of my code:

$("#text_rotator1_1").fadeIn(3000,function(){
    $("#text_rotator1_2").fadeIn(3000, function(){
        $("#text_rotator1_3").fadeIn(3000, function() {
            $("#text_rotator1_4").fadeIn(3000, function() {
            $("#text_rotator1_1").fadeOut(1000);
            $("#text_rotator1_2").fadeOut(1000);
            $("#text_rotator1_3").fadeOut(1000);
            $("#text_rotator1_4").fadeOut(1000, function() {

            });

            });
        });
    });
});

When all 4 elements are faded out, then I want to repeat fade in all elements. Like some while cycle… I think, you understand me 🙂

Answer 1

Wrap it inside a function, and call that function as your last callback:

function start(){
$("#text_rotator1_1").fadeIn(3000,function(){
    $("#text_rotator1_2").fadeIn(3000, function(){
        $("#text_rotator1_3").fadeIn(3000, function() {
            $("#text_rotator1_4").fadeIn(3000, function() {
            $("#text_rotator1_1").fadeOut(1000);
            $("#text_rotator1_2").fadeOut(1000);
            $("#text_rotator1_3").fadeOut(1000);
            $("#text_rotator1_4").fadeOut(1000, start);

            });
        });
    });
});
}
start();

example: http://jsfiddle.net/niklasvh/BYRkp/