如何在Jquery中重複執行某些組元素？

Question

我有問題，即時通訊新的jquery，並不明白我如何可以重複我創建的動畫。我的代碼示例如下：

$("#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() { 

      }); 

      }); 
     }); 
    }); 
}); 

當所有4個元素都淡出時，我想重複淡入所有元素。像一些同時，循環..我認爲，你明白我的:)對不起，我的壞工程

Answer 1

把它包在函數內部，並調用它作爲你的最後一個回調：

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(); 

例如：http://jsfiddle.net/niklasvh/BYRkp/

Answer 2

你有兩個選擇：

• 或者使用一段時間（true）循環
• 使用JavaScript的間隔福每隔幾秒運行一次代碼。在這裏看到：Show and hide divs at a specific time interval using jQuery

Answer 3

我想我會做這樣的事情，使用自定義事件：

$('.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');