Анимация при появлении нового элемента, как?

Question

[XenK]

Есть список из 5 пунктов:

Test1
Test2
Test3
Test4
Test5

Этот список динамически обновляется при помощи AJAX, и в результате обновления список будет такой:

Test2
Test3
Test4
Test5
Test6

При появлении нового элемента (Test6), должна произойти анимация (fadeIn) этого элемента. Как это можно реализовать с помощью JQuery?

Answer 1

[FMars]

Я бы реализовал с помощью CSS, а не JS.
Рекомендую использовать готовый набор анимаций: Animate.css. Просто подключите скачанный css-файл и добавьте к элементу который должен появиться класс "animated" и вид анимации, например:
<span class="animated fadeIn">Test 6</span>

Comments

[XenK]

Возник еще один вопрос, как сделать чтобы анимация проигрывалась заново при обновленном контенте?

[FMars]

XenK: не понял сути вопроса. При каждом появлении нового элемента с классом "animated" он будет анимирован. Если вам нужно добавить бесконечную анимацию добавьте еще один класс "infinite".

[XenK]

FMars: да, извините, не правильно выразился. Как сделать так, чтобы при загрузки страницы элемент с классов "animated fadeIn" не анимировался, а анимировался тогда, когда только появляется в DOM структуре?

[FMars]

XenK: При изначальной загрузке страницы не добавлять класс "animate", а при динамическом добавлении элемента добавлять)

[XenK]

FMars: проблема в том, что у меня сразу идет AJAX загрузка

[FMars]

XenK: значит нужно как-то определить первый раз эта загрузка идет или нет.
Заведите булевую переменную которая после загрузки страницы поменяется на TRUE, и если TRUE, то только тогда показывать анимацию, например.

Answer 2

[Денис Инешин]

Например так: jsfiddle.net/IonDen/fot7h3ka
Только анимацию лучше делать на CSS сегодня.