添加帶有延遲的CSS動畫到每個列表項

我正在嘗試編寫一些jquery，它將通過指定的無序列表/ dom元素併爲每個列表項目/子項分配一個CSS（動畫）類。我也想在.addClass之間做一個可調整的延遲時間。添加帶有延遲的CSS動畫到每個列表項

我試過的一切都慘敗了。

例如：

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
</ul>

變爲：

<ul> 
    <li class="animation">Item 1</li> 
    (50ms delay) 
    <li class="animation">Item 2</li> 
    (50ms delay) 
    <li class="animation">Item 3</li> 
    (50ms delay) 
    <li class="animation">Item 4</li> 
    (50ms delay) 
</ul>

有什麼想法？

來源

2012-06-22 apttap

這這裏工作：

$('ul li').each(function(i){ 
    var t = $(this); 
    setTimeout(function(){ t.addClass('animation'); }, (i+1) * 50); 
});

http://jsfiddle.net/GCHSW/1/

來源

2012-06-22 23:02:11

聰明！ Upvoting。 – Cranio

@Cranio爲什麼謝謝你，先生！：] –

謝謝！正是我需要的。很棒。 – apttap

雖然上面的回答也接近<ul>和<li>場景的好工作，也不會爲一個更詳細的情況很好地工作。要真正撥入此功能，應將功能封裝在接受目標元素和延遲作爲輸入的功能中。該函數會採取這一元素，並設置與...嘆息延遲超時，這太參與，我應該只是它的代碼：

function applyAnimation(element, delay){ 
setTimeout(function(){ $(element).addClass('animation'); }, delay); 
var children = document.getElementById(id).children; 
for(var i = 0; i < children.length; i++){ 
    applyAnimation(children[i],(2+i) * delay);//2+i:0 fails, 1 would be parent, 2 is child 
} 
}

來源

2012-06-22 23:28:01

考慮一下：

HTML：

<ul id="myList"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
</ul>

的Javascript：

$("#myList li").each(function(i, li) { 
    var $list = $(this).closest('ul'); 
    $list.queue(function() { 
     $(li).addClass('animation'); 
     $list.dequeue(); 
    }).delay(50); 
});

見琴：http://jsfiddle.net/DZPn7/2/

雖然這既不簡潔也不高效，但它是一個jQuery純粹者的解決方案。

來源

2012-06-23 00:06:56

不錯，但我想setTimeout方法比使用jQuery的queye和dequeue函數更快。對於移動網站+ CSS動畫，這非常重要。 – andreszs

我有2種動畫方式（使用jQuery和CSS3轉換+ .addClass）。

所以，你可以嘗試的jQuery例如：

$('#myList li').each(function(i){ 
    $(this).delay(50*i).animate({opacity: 1},250); 
});

，並使用CSS3過渡：

$('#myList li').not('.animation').each(function(i){ 
    setTimeout(function(){ 
     $('#myList li').eq(i).addClass('animation'); 
    },50*i); 
});

享受！

來源

2014-01-04 08:28:59

添加帶有延遲的CSS動畫到每個列表項

回答

相關問題