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

Answer 2

首先完成后，您需要使用回调函数为下一个数字设置动画。请参阅documentation。

类似的东西：

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

你需要递归调用每个数字。

Answer 3

试试这个：

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

Answer 4

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

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

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

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

4 个答案: