JQuery的动画问题

Question

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

http://jsbin.com/anayi3/edit

我已经使用了slideDown动画方法。问题是所有项目一起滑落。我希望在短暂延迟后显示每个数字。对于有经验的jQuery开发人员来说，这应该不是什么问题。

如何做到这一点？

在此先感谢。

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

这里所有的动画连接到“身体”，但可以是任何元素。 “下一个”语法在jquery 1.4中是新的。