javascript - 追加された要素を一度に1つずつフェードインします

Question

IDの配列があり、別のページからこれらのIDの要素を読み込んでいます。

    $.each(idArr, function() {
        var divline = '<div class="line" id="' + this + '">';
        var url = 'allitems.php #' + this + ' div';
        $('#the-list').append($(divline).load(url).hide().fadeIn());
    });

正常に動作しますが、ロードされた要素を一度に1つずつフェードインするか、少なくとも一度にすべてではないようにします。コードで.delayを使用する方法がわかりません。それとも別の方法がありますか？

ありがとうございました ：）

Answer 1

簡単な解決策は、以下を使用することsetTimeoutです。

$.each(idArr, function(i) {
    var divline = '<div class="line" id="' + this + '">';
    var url = 'allitems.php #' + this + ' div';
    setTimeout(function(){
        $('#the-list').append($(divline).load(url).hide().fadeIn());
    }, i*1000);
});

Answer 2

この方法を試してください：

$(".elements").each(function(i, e) { $(e).delay(i * 400).fadeIn(400); });

Answer 3

$.each(idArr, function(i,el) {
    var divline =  $('<div />', {'class':'line', id: el}),
        url = 'allitems.php #' + el + ' div';
    $('#the-list').append(divline.load(url).hide().delay(i*1000).fadeIn());
});