1

ライブデモ:ライブデモ

HTML:

   <div class="target">
      <img src="bg-clock.png" alt="jQuery" />
   </div>
   <div class="target2">
      <img src="bg-clock.png" alt="jQuery" />
   </div>

CSS:

.target, .target2 {
    display: none;
}

JQuery:

  $(document).ready(function() {
       $(".target").show( "drop", 
                      {direction: "down"}, 1000 );
       $(".target2").show( "drop", 
                      {direction: "down"}, 1000 );

  });

今は両方の DIV が同時に表示されますが、他の DIV のアニメーションなどを完成させてtarget2から表示したいと考えています。target1

4

2 に答える 2

3

complete最初のアニメーション関数のコールバックを使用する:のアニメーションが完了しtarget2たときにのみアニメーション化されます。target1

  $(document).ready(function () {
      $(".target").show("drop", {
          direction: "down",
          complete: function () {
              $(".target2").show("drop", {
                  direction: "down"
              }, 1000);

          }
      }, 1000);

  });

フィドル

。見せる（）

一連のターゲットの場合、次の方法で実行できます。

slideIn単一のセレクターを使用してターゲットを収集するために、ターゲットに対して呼び出される共通のクラス名を指定するだけです。セレクターまたは属性 startswith セレクターで複数のクラス名を使用することもできます

  var elems = $('.slideIn').get(); // get all the targets to an array.

  function animate() {
      var elem = elems.shift(); //remove the top element from the array

      $(elem).show("drop", { //animate it
          direction: "down",
          complete: function () {
             if(elems.length > 0)
                window.setTimeout(animate); //use recursive callback
          }
      }, 1000);
  }

  animate(); //invoke for the first time.

フィドル

于 2013-06-24T18:06:37.947 に答える
0

多くのターゲットがある場合、コールバックは使用しません。ネスティングは厄介になります。それぞれに遅延を使用できます

$(document).ready(function() {
     $(".target").show( "drop", 
                  {direction: "down"}, 1000 );
     $(".target2").delay(200).show( "drop", 
                  {direction: "down"}, 1000 );
     $(".target3").delay(200).show( "drop", 
                  {direction: "down"}, 1000 );
     $(".target4").delay(200).show( "drop", 
                  {direction: "down"}, 1000 );

});

これは、あなたの効果を達成する時間で遊ぶことができるそれぞれの間にわずかな一時停止があります

于 2013-06-24T18:16:13.300 に答える