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/

Answer 2

您可以使用queue()：

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

});

Example.

Answer 3


//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 4

怎么样？

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

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

4 个答案: