Javascript 如何使用jQuery单独运行slideDown动画？

我创建了一个jQuery动画，可以通过单击顶部的预览按钮查看：

$(function(){
    $.each([1, 2, 3, 4, 5, 6, 7, 8, 9], function() {
        var elem = $('<div>').html('Number : ' + this).appendTo($('body')).hide();
        $("body").queue(function(next) {
            elem.slideDown('slow', next);
        });
    });
});

$（函数（）{
$。每个（[1,2,3,4,5,6,7,8,9]，函数（）{
var elem=$（''）.html（'Number:'+this）.appendTo（$（'body'））.hide（）；
$（“正文”）.queue（函数（下一个）{
元素向下滑动（“慢”，下一个）；
});
});
});

---

我使用了

slideDown

动画方法。问题是所有项目都会一起下滑。我希望每个数字在短时间延迟后显示。

您需要使用回调函数在第一个数字完成后设置下一个数字的动画。看

比如：

$('firstNumber').slideDown('slow',function(){ 
    $('secondNumber').slideDown('slow');
});

---

您需要为每个数字递归调用此函数。

您需要在第一个数字完成后使用回调函数为下一个数字设置动画。看

比如：

$('firstNumber').slideDown('slow',function(){ 
    $('secondNumber').slideDown('slow');
});

您需要为每个号码递归调用此选项。

尝试以下操作：

var index = 0;

function animate() {
  elem = $("div:eq(" + index + ")");
  elem.slideDown('slow');
  index++;
  if (index < 10) {
    setTimeout(animate, 500);
  }
}

$(function(){

  for(var i = 1; i < 10 ;i++){
    var elem = $('<div>').html('Number : ' + i).appendTo($('body')).hide();
  }
  animate();
});

var指数=0；
函数animate（）{
元素=$（“div:eq（“+index+”））；
元素滑下（“慢”）；
索引++；
如果（指数<10）{
设置超时（动画，500）；
}
}
$（函数（）{
对于（变量i=1；i<10；i++）{
var elem=$（''）.html（'Number:'+i）.appendTo（$（'body'））.hide（）；
}
制作动画（）；
});

试试这个：

var index = 0;

function animate() {
  elem = $("div:eq(" + index + ")");
  elem.slideDown('slow');
  index++;
  if (index < 10) {
    setTimeout(animate, 500);
  }
}

$(function(){

  for(var i = 1; i < 10 ;i++){
    var elem = $('<div>').html('Number : ' + i).appendTo($('body')).hide();
  }
  animate();
});

var指数=0；
函数animate（）{
元素=$（“div:eq（“+index+”））；
元素滑下（“慢”）；
索引++；
如果（指数<10）{
设置超时（动画，500）；
}
}
$（函数（）{
对于（变量i=1；i<10；i++）{
var elem=$（''）.html（'Number:'+i）.appendTo（$（'body'））.hide（）；
}
制作动画（）；
});

基本上，您需要将所有动画附加到某些元素，以便按顺序运行它们

$(function(){
    $.each([1, 2, 3, 4, 5, 6, 7, 8, 9], function() {
        var elem = $('<div>').html('Number : ' + this).appendTo($('body')).hide();
        $("body").queue(function(next) {
            elem.slideDown('slow', next)
        });
    });
});

$（函数（）{
$。每个（[1,2,3,4,5,6,7,8,9]，函数（）{
var elem=$（''）.html（'Number:'+this）.appendTo（$（'body'））.hide（）；
$（“正文”）.queue（函数（下一个）{
元素向下滑动（“慢”，下一个）
});
});
});

---

在这里，所有动画都附加到“body”，但可以是任何元素。“next”语法在jquery 1.4中是新的。

基本上，您需要将所有动画附加到某个元素，以便按顺序运行它们

$(function(){
    $.each([1, 2, 3, 4, 5, 6, 7, 8, 9], function() {
        var elem = $('<div>').html('Number : ' + this).appendTo($('body')).hide();
        $("body").queue(function(next) {
            elem.slideDown('slow', next)
        });
    });
});

$（函数（）{
$。每个（[1,2,3,4,5,6,7,8,9]，函数（）{
var elem=$（''）.html（'Number:'+this）.appendTo（$（'body'））.hide（）；
$（“正文”）.queue（函数（下一个）{
元素向下滑动（“慢”，下一个）
});
});
});

---

在这里，所有动画都附加到“body”，但可以是任何元素。“next”语法在jquery 1.4中是新的。

一个使用递归匿名函数的示例。将其放入文档就绪功能中

  // Array of elements to be animated.
  var elements = $('.your-selector-here li').get();

  (function () {
    // Take out the first element of array, animate it
    // and pass this anonymous function as callback.
    $(elements.shift()).slideDown('slow', arguments.callee);
  })();
​

---

一个使用递归匿名函数的示例。将其放入文档就绪功能中

  // Array of elements to be animated.
  var elements = $('.your-selector-here li').get();

  (function () {
    // Take out the first element of array, animate it
    // and pass this anonymous function as callback.
    $(elements.shift()).slideDown('slow', arguments.callee);
  })();
​

---

请修改脚本，使其在延迟一段时间后显示项目。你可以在那里编辑它。谢谢。请修改脚本，以便在延迟一段时间后显示项目。你可以在那里编辑它。谢谢这是非常聪明和优雅的。欢迎来到SO，Yaggo@雅戈：太好了：没想到会这样。谢谢：）这是完全聪明和优雅的。欢迎来到SO，Yaggo@雅戈：太好了：没想到会这样。谢谢：）