将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)