0

説明を簡単にするためにjsfiddleを作成しました。( http://jsfiddle.net/FPznm/ )。私がやろうとしているのは、テーブルの最後にある「Visa mer」ボタンをクリックすると、非表示の行が遅れてフェードインされるようにすることです。

現在のようには機能せず、その理由はわかりません。(jsfiddle の Javascript ウィンドウを参照してください)。

問題は、効果が消える.delay()前に を追加すると、まだ表示されることです。.fadeIn()fadeIn()

  for (i = 0; i <= increaseBy; i++) {
        hidden.eq(i).delay(i * 20).fadeIn(500);
        hidden.eq(i).removeClass("hidden");
    }

これは、問題があるコードです。それが機能しない原因であると考えて.eq()います。

4

4 に答える 4

1

removeClassメソッドよりも高速に実行されるためfadeIn、アニメーションが完了したらクラスを削除できます。

hidden.eq(i).delay(i * 20).fadeIn(500, function(){
    hidden.eq(i).removeClass("hidden");
});

http://jsfiddle.net/k28WT/

のクラスを持つ最初の 5 つの要素を選択する場合は、セレクターhiddenを使用できます。:lt

$(document).ready(function() {
    $("td.showMore").on('click', function() {
        $("tr.hidden:lt(5)").each(function(i){
            $(this).delay(i + 200).fadeIn(500, function(){
               $(this).removeClass('hidden')
            })
        })
    });
});

http://jsfiddle.net/vex3R/

于 2012-11-08T01:50:16.807 に答える
1

私の答えを説明するフィドルを作成しました：http://jsfiddle.net/3leven11/FPznm/5/

あなたがする必要があるのはこれだけです：

$(document).ready(function() {
    $("td.showMore").on('click', function() {
        var increaseBy = 5;
        $("tr.hidden").each(function(index, elem) {
            if (index <= increaseBy) {
                $(elem).delay(index * 20).fadeIn(500, function() {$(elem).removeClass('hidden');});
            }
        });
    });
});​
于 2012-11-08T01:50:25.590 に答える
1

問題は、アニメーションが非同期であるため、クラスを即座に削除することです

代わりにこれを試してください。表の行がうまくアニメーション化されないことに注意してください

$("td.showMore").on('click', function() {
        var hidden = $("tr.hidden"),
            increaseBy = 5;
        for (i = 0; i <= increaseBy; i++) {
            hidden.eq(i).delay(i * 200).fadeIn(1000, function(){ 
                   $(this).removeClass("hidden");
            });

        }
    });

20編集：また、あなたの遅延は20ミリ秒であり、これは1/50秒であり、人間の目はそれを登録することさえできないことに注意してください

于 2012-11-08T01:53:22.443 に答える
1

次の行を削除する必要があります。hidden.eq(i).removeClass("hidden");

fadeInは非同期です: 内部的にはおそらくsetTimeoutorで動作していsetIntervalます。500 ミリ秒後にフェードインを完了するように指定しましたが、hidden直後に (500 ミリ秒が経過するのを待たずに) クラスを削除しています。

が完了した後にクラスを変更するか、何か他のことを行う必要がある場合は、アニメーションが完了した後に実行されるfadeInへのコールバックを提供できます。fadeIn詳細については、http: //api.jquery.com/fadeIn/を参照してください。

于 2012-11-08T01:54:20.287 に答える