Javascript 使用HTML/JQuery/CSS逐个显示DIV

现场演示：

HTML:

JQuery：

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

  });

---

现在两个DIV同时出现，但我希望

target2

在

target1

完成其动画后出现，对于任何其他DIV，如此类推。

使用第一个动画函数的

complete

回调：这样

target2

仅在

target1

的动画完成后才被设置动画完成

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

          }
      }, 1000);

  });

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

只需为目标提供一个名为

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.

---

如果您有许多目标，我不会使用回调。筑巢会变得很糟糕。 你可以对每一个都使用延迟

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

}))

---

这两个目标之间会有一个小小的停顿，你可以利用时间来达到你的效果

所以如果我有四个目标，我会在每个目标中筑巢？@Jonathan yup有区别。前者将获得DOM元素数组，您可以在其中应用诸如shift（）之类的数组操作，后者将获得集合对象。@SiKni8知道为什么会出现错误吗？您是否在标记中添加了类？@SiKni8似乎存在css专用性问题。看，如果没有脚本，它会显示所有的脚本。它不应该是理想的。如果幻灯片未显示，则幻灯片将不起作用：无。如果您的问题得到了您想要的答案，请记住标记为答案：）@SiKni8哪个版本9看起来不错。如果有任何其他版本而不是使用display:inline块，请尝试使用

float:left

  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.

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