jQuery中的fadeIn方法是一个非常有用的动画效果,它可以让元素以渐变的方式显示出来。它可以让你在不使用任何图像或Flash的情况下,创建出一些很酷的动画效果。
fadeIn方法可以让你在不使用任何图像或Flash的情况下,创建出一些很酷的动画效果。它可以让元素从透明度0开始,然后逐渐变为不透明,最终达到目标透明度。
$("#element").fadeIn(1000);
上面这行代码将会使元素#element在1000毫秒内完成fadeIn动画效果。如果你想要自定义动画时间,也可以传入一个对象作为参数:
$("#element").fadeIn({duration: 1000, easing: "linear"});
上面这行代码将会使元素#element在1000毫秒内完成fadeIn动画效果,并且使用linear easing来进行动画。easing是一个重要的部分,它能够影响动画的流畅度和感觉。jQuery中有很多不同的easing方法,例如swing、easeOutQuad、easeInOutCubic等。
此外,jQuery中还有一些相关的fade方法:fadeOut、fadeToggle、fadeTo。这些方法都能够帮助你创建出各式各样的动态效果。例如 fadeTo 方法能够帮助你将元素透明度调整到特定水平而不是0或1.
jQuery 效果方法
使用淡入效果显示所有 <p> 元素:
fadeIn() 方法逐渐改变被选元素的不透明度,从隐藏到可见(褪色效果)。
注释:隐藏的元素不会被完全显示(不再影响页面的布局)。
提示:该方法通常与 fadeOut() 方法一起使用。
参数 | 描述 |
---|---|
speed | 可选。规定褪色效果的速度。 可能的值:
|
easing | 可选。规定在动画的不同点上元素的速度。默认值为 "swing"。 可能的值:
|
callback | 可选。fadeIn() 方法执行完之后,要执行的函数。 如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。 |
fadeIn() - 使用 speed 参数
如何使用 speed 参数来规定褪色效果的速度。
fadeIn() - 使用 callback 参数
当使用淡入效果显示元素时,如何使用 callback 参数。
jQuery 效果方法
jQuery clearQueue() 方法jQuery 效果方法实例 停止队列中的剩余函数:$(button).click(function(){ $(div).clearQueue(); }); ...
jQuery jQuery.fx.off 属性jQuery 属性实例 切换动画开关:$(#true).click(function(){ jQuery.fx.off = true;}); $(#false).cli...
jQuery die() 方法jQuery 事件方法实例 移除所有通过 live() 方法向 p 元素添加的事件处理程序:$(p).die(); 定义和用法 die() ...
jQuery bind() 方法jQuery 事件方法实例 向 p 元素添加一个单击事件:$(p).bind(click,function(){ alert(The paragraph was cli...
jQuery click() 方法jQuery 事件方法实例 单击 p 元素时警报文本:$(p).click(function(){ alert(The paragraph was clicked.); ...