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中是新的。