Анимирование элементов списка с помощью jQuery

Question

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

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

Любые идеи будут наиболее ценными.

Спасибо

Answer 1

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

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

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

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

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

Демо

РЕДАКТИРОВАТЬ: Изменено исчезать, чтобы исчезать в

Answer 2

Предполагая, что:

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

и CSS:

ul.fadein li { display: none; }

пробег:

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

function fade_in_next() {
  $("ul.fadein > li:hidden:first").fadeIn("slow", function() {
    setTimeout(fade_in_next, 500);
  });
}  

Answer 3

var slightdelay = 100; // in milliseconds

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

$("#trigger").click(fadeOneIn);