jquery - 结合 jQuery 延迟和 windowTimeout 以实现基于 CSS 的淡入淡出

Question

在这里挥舞大棒，在个人元素上只采用现代风格。元素以 opacity:0 加载到页面上，并将添加一个具有 opacity:1 和 CSS3 过渡的类。我试图提示每个元素一个接一个地淡入。

通常，我可以使用下面的代码来提示淡入，但这使用了 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);
    });
});

Answer 1

尝试以下操作:

$('.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)