JQuery анимации при добавлении HTML

Question

Я пытаюсь создать эффект fadeIn при добавлении <UL> с помощью Jquery, но эффект анимации никогда не появляется на странице. Я делаю ошибку при указании эффекта fadeIn?

Вот так выглядит мой код

<UL id="myUL">
   <LI> First Item <LI>
   <LI> Second Item <LI>
   <LI> Third Item <LI>
   <LI> Fourth Item <LI>
<UL>

Jquery выглядит следующим образом (при нажатии кнопки)

var liData = "<LI> A New Item </LI>";
$('#myUL').prepend(liData).fadeIn('slow');

Хотя <LI> правильно отображается на странице, я не вижу эффекта исчезновения на странице. Я делаю что-то неправильно, связывая данные и эффект на элемент?

Answer 1

Добавлено отображение: стиль отсутствует, поэтому он не виден, как только вы добавите его и несколько перевернете строку jQuery.

var liData = '<LI style="display:none"> A New Item </LI>';
$(liData).prependTo('#myUL').fadeIn('slow');

JSFiddle: http://jsfiddle.net/sPeHy/4/

Answer 2

Демо

Это должно сделать это

$('#myUL').prepend(liData).find("li:first").hide().fadeIn('slow');

В основном вы выбирали ul, а не li. Также вам нужно спрятать его до того, как оно исчезнет, ​​иначе оно просто исчезнет со 100% до 100%, и вы ничего не увидите.

Answer 3

Во-первых, элемент должен быть добавлен событием, чтобы вы могли заметить его, а не во время загрузки.

Во-вторых, вновь добавленный элемент списка по умолчанию должен быть скрыт, чтобы его можно было отображать с эффектом постепенного увеличения.

Вот код:

$('#add_item').click(function(e){
    e.preventDefault();
    var liData = '<LI style="display:none"> A New Item </LI>';
    $(liData)
        .prependTo('#myUL')
        .fadeIn('slow'); 
});

Вот демоверсия

Answer 4

попробуйте

$('#myUL').prepend($("<LI> A New Item </LI>").hide().fadeIn('slow'));

скрипка: http://jsfiddle.net/sPeHy/3/