將基於CSS的jQuery延遲和windowTimeout相結合，逐漸淡入

Question

擺動這裏的大蝙蝠，走向個人項目的現代化。元素在0123'的頁面上加載，並將添加一個具有opacity:1和CSS3轉換的類。我試圖提示每個元素都會逐漸淡出。

通常，我可以使用下面的代碼來提示淡入，但是這使用jQuery的.animate()方法，我希望更高的幀速率和更少的CPU應變。

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

添加類是almonst瞬間（我們人類），因此影響不會做所有的東西。

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