Question

我在使用Jquery预先添加<UL>时尝试创建fadeIn效果，但动画效果从未出现在页面上。我在指定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>在页面上正确显示，但我不会在页面上看到fadeIn效果。我在绑定数据和对项目的影响方面做错了吗？

Answer 1

添加了display：none样式，因此只要你预先添加它并且稍微颠倒了jQuery行，它就不会显示。

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

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

Answer 2

Demo

这应该这样做

$('#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'); 
});

Here is a demo

Answer 4

试试这个

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

小提琴：http://jsfiddle.net/sPeHy/3/

附加html时的jquery动画

4 个答案:

Demo