附加 html 时的 jquery 动画

标签 jquery animation

我试图在添加 <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>在页面上正确显示,我在页面上看不到淡入效果。我在绑定(bind)数据和对项目的影响方面做错了什么吗?

最佳答案

添加了 display:none 样式,因此一旦您添加它,它就不可见,并且稍微颠倒了 jQuery 行。

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

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

关于附加 html 时的 jquery 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7140844/

相关文章:

javascript - 如何在数据表列中仅显示前 30 个字符,然后放置“阅读更多”按钮?

C++ 使用 Flash 或类似的动画

python - 使旋转平稳

java - Swing 动画问题?

android - 在动画下旋转位图

javascript - 仅在 jQuery 验证中验证数字、括号和空格

javascript - 我的函数无法传递它的参数值 javascript

android - 在 Android 上使用 OpenGL 绘制全屏单帧动画是否可行?

javascript - 选择 div 的最后一个子元素而不循环

javascript - 检查函数中字符串的后缀