Question

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同时出现，但我希望在target2完成动画之后出现target1，等等任何其他DIV。

Answer 1

使用第一个动画函数的complete回调：只有target2的动画完成后target1动画才会生成动画。

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

          }
      }, 1000);

  });

<强> Fiddle

<强> .show()

对于一系列目标，您可以这样做：

为目标提供一个名为slideIn的公共类名，以便使用单个选择器收集它们。您还可以在选择器或属性startswith selector

中使用多个类名

  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.

<强> Fiddle

Answer 2

如果你有很多目标，我就不会使用回调。筑巢会变得讨厌。你可以在每个

上使用延迟

$(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 );

}）;

每个你可以玩的时间稍微停顿以获得效果

使用HTML / JQuery / CSS一个接一个地显示DIV

2 个答案: