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

На этот вопрос уже есть ответ:

Как заставить каждый тег <li> появляться медленно один за другим 1 ответ

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

Все, что я пробовал, с треском провалилось.

Например

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

Becomes:

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

Есть предположения

Ответы на вопрос(4)

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.

 andreszs30 янв. 2015 г., 02:46
Замечательно, но я предполагаю, что метод setTimeout быстрее работает в браузере, чем функции jQuery queye и dequeue. Для мобильных сайтов + анимация CSS это очень важно.
Решение Вопроса

Это работает:

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

http: //jsfiddle.net/GCHSW/1

 Cranio23 июн. 2012 г., 01:10
Умная! Upvoting.
 Adam Merrifield23 июн. 2012 г., 01:18
@ apttap Добро пожаловать!
 Adam Merrifield23 июн. 2012 г., 01:11
@ Cranio, спасибо, сэр! :]
 apttap23 июн. 2012 г., 01:18
Благодарность! Именно то, что мне было нужно. Работает отлично

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

Наслаждаться

приведенный выше, хорошо подходит для сближения с<ul> а также<li> сценарий, он не будет работать очень хорошо для более подробной ситуации. Чтобы действительно подключиться, функциональность должна быть заключена в функцию, которая принимает целевой элемент и задержку в качестве ввода. Затем функция возьмет этот элемент и установит тайм-аут с задержкой для ... sigh, это слишком сложно, я должен просто написать его:

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

Ваш ответ на вопрос