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);
});
有帮助吗?

解决方案

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/

其他提示

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

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top