JQuery each逐个执行append和fadeIn方法

Question

我有一个数组上的 each 函数，我想为每个数组行创建一个 div 并按顺序逐渐淡入它们。最好按照它们在数组中的顺序。目前我设法将所有内容同时淡入，但我想要逐个淡入。这是我的代码:

$.each(data, function(key, val) {
    var generatedDiv = $(document.createElement('div'));

    generatedDiv.attr('id',"div-"+val.id);
    generatedDiv.css({//somecssproperties});
    $('#results').append(generatedDiv);
    generatedDiv.fadeIn("fast");
});

有什么想法吗？

谢谢。

- dandoen

---

如果您创建了一个这样的fiddle，我可能能够提供帮助。 - rgin

Answer 1

尝试这段代码

var t = 100;
$.each(data, function(key, val) {
    var generatedDiv = $(document.createElement('div'));
    generatedDiv.attr('id',"div-"+val.id);
    generatedDiv.css({//somecssproperties});
    $('#results').append(generatedDiv);
    t += 100;
    generatedDiv.delay(t).fadeIn('fast');
});

demo

- genesis

---

我猜这将同时启动fadeIn，只是使后面的变慢一些。 - cbrandolino

谢谢，但并不完全是我想要的。后面那些加载速度比第一个稍微慢一点，但它们仍然一次性全部加载。 - dandoen

哦，现在我看到了新的变化。让我试一试。 - dandoen

@genesis-fi，你不需要再增加t的值了 - 否则后面的速度会非常慢。 - cbrandolino

@cbrandolino他想让它们一个接一个地显示，而不是同时显示/在100毫秒后全部显示。 - genesis

@genesis-φ，你是正确的。我以为 .delay() 也会影响 .each()。 - cbrandolino