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

Question

我创建了一个 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);
        });
    });
});

http://jsbin.com/anayi3/edit

我使用了slideDown 动画方法。问题是所有项目一起滑落。我希望每个数字在短暂延迟后显示。

Answer 1

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

  // 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);
  })();
​