jQueryでループを作成する方法

Question

2つのループを1つずつ表示する必要があります。

HTML テキスト その他のテキスト

jQueryの

$('#1').animate({opacity:0},500) 
    .animate({opacity:1},500) 
    .delay(2000) 
    .animate({opacity:0},500); 

の間にここに行くべきですか？だから、第一、私たちは＃1のためのアニメーションを実行するだけにして＃1 DIV

$('#2').animate({opacity:0},500) 
    .animate({opacity:1},500) 
    .delay(2000) 
    .animate({opacity:0},500); 

そして、どのようにこのうち無限ループを作るためにはアニメーションを開始しますか？

Answer 1

無限ループの場合、各divのアニメーションを独自の関数に入れて、その関数を他のアニメーションの最後の完全なコールバックから呼び出すことができます。 （説明よりも、表示が簡単:)

function do1() { 
    $('#1').animate({opacity:0},500) 
     .animate({opacity:1},500) 
     .delay(2000) 
     .animate({opacity:0},500,function() { 
      do2(); 
     }); 
} 
function do2() { 
    $('#2').animate({opacity:0},500) 
      .animate({opacity:1},500) 
      .delay(2000) 
      .animate({opacity:0},500,function() { 
      do1(); 
     }); 
} 

​do1();​ 

デモ：http://jsfiddle.net/nnnnnn/HQ5ys/1

それとも、自分自身を呼び出す単一の関数内のコードを置く：

function myAnimate() { 
    $('#1').animate({opacity:0},500) 
     .animate({opacity:1},500) 
     .delay(2000) 
     .animate({opacity:0},500,function() { 
      $('#2').animate({opacity:0},500) 
      .animate({opacity:1},500) 
      .delay(2000) 
      .animate({opacity:0},500,function() { 
       myAnimate(); 
      }); 
} 

​myAnimate(); 

http://jsfiddle.net/nnnnnn/HQ5ys/2/

Answer 2

コールバックはanimate()です。アニメーションが終了するとコールバックが実行されます。

$('#one').animate({}, 'fast', function(){ 
    //Callback 
    $('#two').animate({ }); 
}); 

Answer 3

のような完全なコールバック関数を使用してください：あなたは、このためのjQueryのとき、その関数を使用することができます

 

setInterval(function() { 
$("#1").animate({opacity:0}, 500, function() { 
    $("#2").animate({opacity:0},500); 
}), 5000); //runs every 5 secs 
 

Answer 4

。

$.when(
    function(){ 
     $('#1').animate({opacity:0},500) 
      .animate({opacity:1},500) 
     .delay(2000) 
     .animate({opacity:0},500);}) 
.then(function(){ 
    $('#2').animate({opacity:0},500) 
    .animate({opacity:1},500) 
    .delay(2000) 
    .animate({opacity:0},500); 
});