jQuery - 追加多個元素一個接一個

Question

我正在尋找創建一個很好的效果，當多個段落附加到一個div。當我追加時，我想逐漸淡入每一段，所以一個接一個地顯示。目前他們都在同一時間淡入。

example html;

<div class="wrapper"> 
<p class="para">paragraph 1</p> 
<p class="para">paragraph 2</p> 
<p class="para">paragraph 3</p> 
</div> 

這裏是用於追加到div

$(results).prependTo(".wrapper").hide().fadeIn('slow'); 

（結果）的代碼僅僅是多個段落。

在此先感謝您的幫助和建議。

Answer 1

你可以嘗試這樣的事：

$(results).bind('appear', function(){ // bind a custom event 
    $(this).fadeIn('slow', function(){ 
    $(this).next('p.para').trigger('appear'); // recurse 
    }); 
}) 
.prependTo('wrapper') 
.end() // back to "results" 
.hide() // not necessary if already hidden by style rule 
.first().trigger('appear'); // start the cascade 

下面是一個例子：http://jsfiddle.net/redler/CDbEn/

Answer 2

//assuming resuls is an array of strings containing your p's 
var appear = function(index) { 
    if (results[index]) 
    $(results[index]).prepend('.wrapeer').hide().fadeIn('slow', function(){ appear(index+1); }); 
} 

Answer 3

您可以使用queue()此：

$('p').prependTo("#wrapper").hide().each(function() { 
    var element = $(this); 
    $('#wrapper').queue(function() { 
     setTimeout(function() { 
      element.fadeIn('slow'); 
      $('#wrapper').dequeue(); 
     }, 700); 
    }); 

}); 

Example.

Answer 4

什麼

$('.para').each(function(index){ 
    $(this).hide().prependTo('.wrapper').delay(500 * index).fadeIn('slow'); 
});