Question

我在数组中有一些div。我想使用jQuery中的.show（'slow'）动画。

目前我有这个：

for(var i = 0; i < output.length; i++){
    jQuery("#container").append(output[i]).show('slow');
}

但所有div都会立即附加。我认为问题是每个追加都不等待下一个追加？

你们有想法吗？

Answer 1

显示的所有代码操作都发生在同一帧上。先隐藏它们。

假设数组是div s：

的字符串

for (var i = 0; i < output.length; i++) {
    jQuery("#container").append($(output[i]).hide().delay(2000* i).show('slow'));
}

第二个问题是你想要一个接一个地链接视觉淡化，在这种情况下只是在show之前引入一个增加的延迟。只需调整时间值即可获得所需的效果。

JSFiddle： http://jsfiddle.net/nvffL4zt/1/

Answer 2

首先隐藏 div，然后追加，然后显示。诀窍在于使用appendTo（），因为普通的append（）返回容器，而不是附加的元素。所以你在容器上使用show（），而不是附加的div。

for (var i = 0; i < output.length; i++) {

    jQuery(output[i])).hide().appendTo("#container").show('slow');   
}

Answer 3

你有两个解决方案，你可以在你的div上使用display：none;要么你影响他们一个班级（让他们说＆＃34;隐藏＆＃34;），你放你的css中.hidden {display：none}。

问题是当你追加它们时会显示你的div，并且show函数没用，因为你的div已经可见了。

Answer 4

使用关闭

for (var i = 0; i < output.length; i++) {
    (function (i) {
        jQuery("#container").append(output[i]).children().last().hide().show('slow');
    })(i);

}

使用jQuery show Animation从数组中追加div

4 个答案: