0 
$(document).ready(function(e) {
    $('.holder').each(function()
    {
        $(this).addClass('dummy');
        setTimeout( function () {
            $('.dummy').children('.box').slideDown('300');
        },2000);
    });
});

<div>私は別の中にn個あり<div class='holder'>ます。だから私は、それぞれの子にいくつかの効果を追加することを考え<div>ました. しかし問題は<div>、ホルダー内のすべての子供が同時に滑り落ちることです。に従わないようsetTimeout()です。なぜこれが起こるのですか？

4

3 に答える 3

2

ループ間隔をインクリメントする必要があり、タイムアウト コールバック内でホドラー参照を使用する必要もあります。

$(document).ready(function (e) {
    $('.holder').each(function (idx) {
        var $this = $(this).addClass('dummy');
        setTimeout(function () {
            $this.children('.box').slideDown('300');
        }, idx * 2000);
    });
});
于 2013-10-14T13:13:06.223 に答える
1

eachループはほぼ瞬時に実行され、すべての呼び出しに同じタイムアウトを与えますsetTimeout。したがって、それらはすべて (インスタント) ループの 2000 ミリ秒後に実行されます。

簡単な解決策：

$(document).ready(function(e) {
    $('.holder').each(function(i){
        var $this = $(this);
        $this.addClass('dummy');
        setTimeout( function () {
            $('.box', $this).slideDown('300');
        },2000*(i+1)); // give different timeouts
    });
});
于 2013-10-14T13:12:51.503 に答える
1

使用する

$(document).ready(function (e) {
    $('.holder').each(function (interval) { // interval here is index of each loop
        $(this).addClass('dummy');
        var $this = $(this);
        setTimeout(function () {
            $this.children('.box').slideDown('300');
        }, 2000 * (interval + 1));
    });
});

説明

1st timeOut = 2000=  2000 * (interval + 1)=  2000 * (0+ 1)=  2000 * (1)
2nd timeOut = 4000=  2000 * (interval + 1)=  2000 * (1+ 1)=  2000 * (2)
3rd timeOut = 6000=  2000 * (interval + 1)=  2000 * (2+ 1)=  2000 * (3)

等々

于 2013-10-14T13:13:28.243 に答える