jQuery - 一个接一个地追加多个元素

Question

我想在向div添加多个段落时创建一个很好的效果.当我追加时,我希望一次淡出一段,以便一个接一个地显示.此刻他们都在同一时间淡出.

示例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/