在'this'上使用jQuery .delay（）

Question

我正在使用aniCollection使三個框淡入並在頁面加載時向上滑動。它迄今爲止工作得很好，但我想我會盡量讓這些盒子一次出現，以獲得更好的視覺效果。這是效果基本show +淡入的aniCollection代碼：

var element = $('#square'); 

element.mouseover(function(){ 
element.toggleClass('fadeInUp animated'); 
element.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(e){ 
    $(e.target).removeClass('fadeInUp animated'); 
    }); 
}); 

這是我試圖與.delay(counter)單獨延遲每個箱子：當我運行它

var counter = 0; 
var welcomeBoxes = $('#welcomeBoxes'); 
welcomeBoxes.each(function(){ 
    counter += 300; 
    $(this).delay(counter).toggleClass('fadeInUp animated'); 
    $(this).delay(counter).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(e){ 
     $(e.target).removeClass('fadeInUp animated'); 
    }); 
}) 

沒有什麼變化。這些盒子仍然全部淡入。任何幫助，將不勝感激。

Answer 1

1：正如我在評論說.. ID必須是唯一的..所以不使用相同的ID爲多個元素的.. use class=""代替id=""

第二：在更改後上課可以遍歷這樣

var welcomeBoxes = $('.welcomeBoxes'); // use (.) for class like (#) for id 
welcomeBoxes.each(function(i){ // i mean index of element and its start from 0 
    setTimeout(function(){ 
    $(this).toggleClass('fadeInUp animated'); 
    $(this).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(e){ 
     $(e.target).removeClass('fadeInUp animated'); 
    }); 
    }, i * 2000); // 2000 is a setTimeout duration you can change it as you like and we use i * 2000 to make a delay we need 
})