Her bir liste öğesine gecikme ile CSS animasyonu ekleme

Question

Belirtilen sıralanmamış bir liste/dom öğesinden geçecek ve her liste öğesine/çocuğa bir CSS (animasyon) sınıfı atayacak bir jQuery yazmaya çalışıyorum. Ayrıca .addClass arasında ayarlanabilir bir gecikme süresi yapmak istiyorum.

Denediğim her şey sorunsuz bir şekilde başarısız oldu. Örneğin

:

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

Oldu:

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

herhangi bir düşünce?

Answer 1

Bu burada çalışıyor: yanıt yukarıda <ul> ve <li> senaryoyu yaklaşan iyi bir iş yapar

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

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

Answer 2

rağmen, daha ayrıntılı durum için çok iyi çalışmaz. Bunu gerçekten çevirmek için, işlevsellik, hedef öğeyi kabul eden ve bir girdi olarak geciktiren bir işleve sarılmalıdır. fonksiyon o eleman almak ve için ... nefes gecikme ile bir zaman aşımı süresi belirlenir, bu çok ilgilenmektedir ben sadece bu kodu olmalıdır:

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 
} 
} 

Answer 3

bu düşünün:

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); 
}); 

bakınız keman: http://jsfiddle.net/DZPn7/2/

Bu ne kısa, ne de verimli olmasına rağmen, bu bir jQuery purist çözümdür.

Answer 4

Animasyon için 2 yol var (jQuery ve CSS3 Transitions + .addClass ile). CSS3 Geçişler kullanarak

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

ve:

Yani, Örneğin jQuery deneyebilirsiniz

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

tadını çıkarın!