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