Добавление анимации CSS с задержкой к каждому элементу списка

Question

Я пытаюсь написать некоторый jquery, который будет проходить через указанный неупорядоченный элемент list/dom и назначить класс CSS (анимация) каждому элементу списка/дочернему элементу. Я также хочу установить регулируемое время задержки между .addClass.

Все, что я пробовал, потерпело неудачу.

Например:

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

Любые мысли?

Answer 1

Это здесь работает:

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

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

Answer 2

Хотя ответ выше делает хорошую работу приближается к сценарию <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 
} 
} 

Answer 3

Рассмотрим это:

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.

Answer 4

У меня есть 2 способа анимации (с переходами jQuery и CSS3 + .addClass).

Таким образом, вы можете попробовать JQuery, например:

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

и используя CSS3 Transitions:

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

Наслаждайтесь!