5

次のオブジェクトがあることを検討してください。

<div id="d1"><span>This is div1</span></div>
<div id="d2"><span>This is div2</span></div>
<div id="d3"><span>This is div3</span></div>
<div id="d4"><span>This is div4</span></div>
<div id="clickhere"><span>Start animation</span></div>

そして、jQuery を使用して、前述の 4 つの要素のそれぞれにアニメーションを適用したいと考えています。

私が今持っているもの

ページの場合、head セクションに適用される次のコードを検討してください。

function start_anim() {
  $("#d1").animate({top:"-50px"},1000,function(){}); // Animating div1
  $("#d2").animate({top:"-50px"},1000,function(){}); // Animating div2
  $("#d3").animate({top:"-50px"},1000,function(){}); // Animating div3
  $("#d4").animate({top:"-50px"},1000,function(){}); // Animating div4
}
$(document).ready($('#clickhere').click(start_anim));

スクリプトのこのフラグメントは、イベントclickが発生したときに 4 つの div の同期変換を引き起こします。

私がしたいこと

ただし、最初の div を最初に動かしたいのですが、最初の div のアニメーションが 50% に達したときに 2 番目の div を動かしたいと思います。3 番目と最後の div についても同じです。

どうすればこれに到達できますか？ありがとうございました

4

1 に答える 1

10

何かのようなもの：

$("#d1").animate({top:-50}, 1000);
$("#d2").delay(500).animate({top:-50}, 1000);
$("#d3").delay(1000).animate({top:-50}, 1000);
$("#d4").delay(1500).animate({top:-50}, 1000);

またはさらに良い：

var duration = 1000;

$('#d1,#d2,#d3,#d4').each(function(i) {
   $(this).delay( i*(duration/2) ).animate({top:-50}, duration);
});
于 2013-10-20T14:13:58.720 に答える