How to repeat executing a group elements in jQuery?

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 :)

Do you want them to fade out at the same time or one after another like you code illistrates? — natedavisolds, Jun 15 '11 at 22:33

score 2 · Accepted Answer · answered Jun 15 '11 at 22:34

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/

Just beat me to it! I wrote the fiddle and all too! – James Allardice Jun 15 '11 at 22:36 — James Allardice, Jun 15 '11 at 22:36
Thaaaaaaaaaaanks :) You are my Hero, Niklas :) – Misterix Jun 15 '11 at 22:41 — Misterix, Jun 15 '11 at 22:41

score 0 · Answer 2 · answered Jun 15 '11 at 22:39

0

I guess i'd do something like this, using custom events:

$('.text_rotators').bind('fadeMeIn',function(){
  $(this).fadeIn("slow",function(){
      $(this).trigger('fadeMeOut');
  });
}).bind('fadeMeOut',function(){
      $(this).fadeOut("slow",function(){
      $(this).trigger('fadeMeIn');
  });
});

$('.text_rotators').trigger('fadeMeIn');

answered Jun 15 '11 at 22:39

pixeline

17,669
12
84
109

To pixeline, maybe this method is more practical, abstract... but for a while, for me this to hard ;) But thanks, I think, I will try it too ;) – Misterix Jun 15 '11 at 22:43
custom events are not that hard once you understand the concept. What if in addition to the usual "click", "mouseover", ... events, you could create your own? With jquery it's dead simple. simply use bind(), give it a name, what it should do. Then, when you actually need it, .trigger() it. – pixeline Jun 15 '11 at 23:20

How to repeat executing a group elements in jQuery?

2 Answers2