jQuery Function restart or loop

Question

All i would like to do is that this function ones ends just restart or make a loop. please some help, thx. =)

this is my code:

$(function() {
    $('#text').hide();
    $('#text').delay(600).fadeIn(1500).delay(9000).fadeOut(2000);
    $('#text2').hide();
    $('#text2').delay(13500).fadeIn(1500).delay(9000).fadeOut(2000);
    $('#text3').hide();
    $('#text3').delay(26500).fadeIn(1500).delay(9000).fadeOut(2000);
});

i got the code from some where else, but im also new in all this, basically learning from the masters =) — Haroldo, Feb 02 '14 at 00:39

loveNoHate · Answer 1 · 2014-02-02T01:15:55.800

 $(function() {
  function loop() {
   $('#text').hide();
   $('#text').delay(600).fadeIn(1500).delay(9000).fadeOut(2000);
   $('#text2').hide();
   $('#text2').delay(13500).fadeIn(1500).delay(9000).fadeOut(2000);
   $('#text3').hide();
   $('#text3').delay(26500).fadeIn(1500).delay(9000).fadeOut(2000);
   $('classOrTagThatEveryElementHas').promise().done(loop);
  }
  loop();
});

Documentation: http://api.jquery.com/promise/

JS Fiddle: http://jsfiddle.net/RW22m/

Kevin Bowersox · Accepted Answer · 2014-02-01T23:48:45.290

Both fadeIn and fadeOut accept a callback function as the second argument which is executed after the animation finishes. You can take advantage of this function by placing the dynamic parts of your transition into an array. In my code, I have created a function which starts the transitions and then calls itself recursively via a callback function. With each recursion the next index is passed as an argument, which is used to retrieve the transition information from the array.

$(function() {
    $('#text, #text2, #text3').hide();
    var transitions = [
        {id: 'text', delay: 600},
        {id: 'text2', delay: 13500},
        {id: 'text3', delay: 26500}
    ];

    function perform(i){
        $('#' + transitions[i].id).delay(transitions[i].delay).fadeIn(1500).delay(9000).fadeOut(2000, function(){
             perform(++i % transitions.length);
        });     
    }
    perform(0);                          
});

JS Fiddle: http://jsfiddle.net/z5Wcd/

Kevin, thank you so much for your help, this really resolve my problem. its great. thank you again, today i learn something new. — Haroldo, Feb 02 '14 at 00:33
This is nicely done, above all the `%` part for avoiding the `for` loop. But check my `.promise()` part out for the future. @Haroldo — loveNoHate, Feb 02 '14 at 01:06

jQuery Function restart or loop

2 Answers2