Вопросы Теги

Анимация элементов списка с jQuery

Я пытаюсь найти лучший способ анимировать список объектов один за другим.

Так, например, у меня есть УЛ. с 7 объектами в нем и когда мой триггерный элемент нажат, я хочу, чтобы каждый объект постепенно появился один ниже другого с небольшой задержкой между каждым объектом.

Любые идеи больше всего ценились бы.

Спасибо

5
задан Giles Butler 12 May 2010 в 14:45
поделиться

3 ответа

Вы можете использовать псевдорекурсию: 

function fadeItem() {
    $('ul li:hidden:first').fadeIn(fadeItem);
}

Это исчезнет в первом скрытом элементе и вызовет себя, когда анимация закончится, исчезнет второй элемент.
После того, как последний элемент исчезнет, ​​селектор ничего не найдет, поэтому он остановится.

Чтобы добавить задержку между каждым затуханием, вы можете вызвать метод jQuery delay , например: 

function fadeItem() {
    $('ul li:hidden:first').delay(500).fadeIn(fadeItem);
}

Демо

РЕДАКТИРОВАТЬ: затухание изменено на затухание

{{ 1}}
9
ответ дан 14 December 2019 в 01:03
поделиться 
var slightdelay = 100; // in milliseconds

function fadeOneIn()
{
    $("ul li:not(:visible):first").fadeIn(function() { setTimeout(fadeOneIn, slightdelay); });
}

$("#trigger").click(fadeOneIn);
0
ответ дан 14 December 2019 в 01:03
поделиться

Assuming:

<ul class="fadein">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

and CSS:

ul.fadein li { display: none; }

run:

$(function() {
  fade_in_next();
});

function fade_in_next() {
  $("ul.fadein > li:hidden:first").fadeIn("slow", function() {
    setTimeout(fade_in_next, 500);
  });
}
0
ответ дан 14 December 2019 в 01:03
поделиться
Другие вопросы по тегам:

Похожие вопросы: