Pergunta

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);
});
Foi útil?

Solução

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/

Outras dicas

 $(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/

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top