別の要素のアニメーションがJqueryを使用して終了する前にある要素のアニメーションを開始します。

Question

jQueryを使用してアニメーション化したいdivがいくつかあります。しかし、前のdivのアニメーションが途中であるときに、次のdivをアニメーション化したいと思います。希望の効果を得る方法を手伝ってください。私は、次のコードを持っているが、それは動作しません：私はあなたがあなたの質問にいくつかのコードを追加していることがわかり、私：

$('div#first_div').animate({...}, 1000); 
$('div#second_div').delay(500).animate({...}, 1000); 

編集：

$("#box1").animate({opacity:0},{ duration: 800 }).delay(400).animate({opacity:1},{duration: 800 }); 
    $("#box2").animate({opacity:0},{ duration: 800 }).delay(400).animate({opacity:1},{duration: 800 }); 
    $("#box3").animate({opacity:0},{ duration: 800 }).delay(400).animate({opacity:1},{duration: 800 }); 
    $("#box4").animate({opacity:0},{ duration: 800 }).delay(400).animate({opacity:1},{duration: 800 }); 

Answer 1

あなたは第二のdivに遅延を追加することができます正確に次のdivを開始したいときはわかりません。

重要な点は、4つの各行が同時に開始することです。そのため、各行の先頭に遅延を追加することで、目的の結果が得られます。

が

$("#box1").fadeOut(800).delay(400).fadeIn(800); 
$("#box2").delay(400).fadeOut(800).delay(400).fadeIn(800); 
$("#box3").delay(800).fadeOut(800).delay(400).fadeIn(800); 
$("#box4").delay(1200).fadeOut(800).delay(400).fadeIn(800); 

（また、簡単なアニメーションであなたがフェードイン/フェードアウトを使用できることに注意してください：前のボックスには、フェードアウトの途中にあるときに、このコードでは

、例えば、ボックスがフェードアウトを開始しますアニメーションメソッドの代わりに）