1

ここで大きなコウモリを振って現代に行く-個人的なプロジェクトでのみ。要素はページに読み込まれ、CSS3トランジションopacity:0を持つクラスが追加されます。opacity:1各要素を次々にフェードインするようにキューに入れようとしています。

通常、以下のコードを使用してフェードインをキューに入れることができますが、これはjQueryの.animate()方法を使用するため、より高いフレームレートとより少ないCPU負荷が必要です。

$('.test').each(function(i) {
    $(this).delay(i*100).animate({ opacity:1 }, 400); //CPU based!
});

クラスの追加は（私たち人間にとって）瞬時に行われるため、効果はそれほど効果的ではありません。

$('.test').each(function(i) {
    $(this).delay(i*100).addClass('show'); //instant coffee!
});

目標は、クラスが追加された後にタイムアウトを設定して、元のアニメーションと実質的に同じ時間がかかるようにすることです。そしてここに私の問題があります：メソッドsetTimeout()はウィンドウでのみ実行できます...

$('.test').each(function(i) {
    $(this).delay(i*100).setTimeout(function(){ //doesn't work!
        $(this).addClass('show');
    }, 400);
});

addClass()各要素の機能を遅らせ、メソッドにハングタイムを与えるにはどうすればよいですか？

$('.test').each(function(i) {
    var test = $(this);

    test.delay(i*100,function(){ //I wish!
        setTimeout(function(){
            test.addClass('show');
        },400);
    });
});
4

1 に答える 1

0

次のことを試してください。

$('.test').each(function(i) {
    var ind = i * 100;
    var test = $(this);
    setTimeout(function(){ 
        test.addClass('show');
    }, ind);
});

また：

var $tests = $('.test')
var len = $tests.length;
var i = 0;
var test =  setInterval(function(){
                $tests.eq(i).delay(i*100).queue(function(){
                  $(this).addClass('show')
                })   
                i++;
                if (i == len) {
                    clearInterval(test)
                }
             }, 400)
于 2012-07-30T17:30:20.607 に答える