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;
}

查询：

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

  });

现在两个 DIV 同时出现，但我想在完成它的动画target2后出现target1，等等任何其他 DIV。

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，以便使用单个选择器收集它们。您还可以在选择器中使用多个类名或属性以选择器开头

  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 回答