1

在这里挥舞大棒，只在个人项目上进行现代化改造。元素加载到页面上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);
    });
});
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 回答