Domanda

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);
});
È stato utile?

Soluzione

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/

Altri suggerimenti

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top