JQ中给我们定义好的动画效果的函数有很多,这一篇文章我们来说一说,JQ中指定元素淡入与淡出的效果,通过这个效果函数我们可以使前端的web页面更好的呈现给访客的面前
fadeIn()方法与fadeout()方法
fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的。
语法
$(selector).fadeIn(speed,callback)
注:
speed:为效果的持续时间,单位为毫秒。它有三个默认的速度值,分别为:
slow:表示600毫秒
normal:表示400毫秒
fast:表示200毫秒
callback:表示fadeIn函数执行完后,要执行的函数
fadeOut() 方法使用淡出效果来隐藏被选元素,假如该元素是隐藏的。
语法:
$(selector).fadeOut(speed,callback)
注:
speed:为效果的持续时间,单位为毫秒。它有三个默认的速度值,分别为:
slow:表示600毫秒
normal:表示400毫秒
fast:表示200毫秒
callback:表示fadeIn函数执行完后,要执行的函数
举例说明:
利用fadeIn()与fadeOut()写一个淡入淡出的效果
HTML代码
<p>飞鸟慕鱼博客欢迎您!</p> <button id='button'>隐藏</button> <button id='button2'>显示</button> <!--飞鸟慕鱼博客-->
JQ代码
$("#button").click(function(){ $("p").fadeOut("slow"); }); $("#button2").click(function(){ $("p").fadeIn("slow"); });
结果:
我们分别点击显示和隐藏,P标签会慢慢的消失或出现
jQ中的fadeTo()方法的使用与解释
fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。
语法
$(selector).fadeTo(speed,opacity,callback)
注:
speed:为效果的持续时间,单位为毫秒。它有三个默认的速度值,分别为:
slow:表示600毫秒
normal:表示400毫秒
fast:表示200毫秒
opacity:表示淡入或淡出的透明度,必须是介于0.1到1.00之间的数字
callback:标示函数执行完后,要执行的函数
举例说明一下
利用fadeTo()让P标签的透明度为0.4
HTML代码
<p>飞鸟慕鱼博客欢迎您!</p> <button id='button'>测试</button>
JQ代码
$("#button").click(function(){ $("p").fadeTo("slow",0.4); });
fadeToggle()方法解释与使用
fadeToggle():方法可以在对指定元素进行淡入或淡出的切换
语法
$(selector).fadeToggle(speed,easing,callback)
注:
speed:为效果的持续时间,单位为毫秒。它有三个默认的速度值,分别为:
slow:表示600毫秒
normal:表示400毫秒
fast:表示200毫秒
easing:规定在动画的不同点上元素的速度。默认值为 "swing"
"swing" - 在开头/结尾移动慢,在中间移动快
"linear" - 匀速移动
callback:标示函数执行完后,要执行的函数
举例说明
利用fadeToggle()方法,使P标签进行淡入或淡出效果
HTML代码
<p>飞鸟慕鱼博客欢迎您!</p> <button id='button'>测试</button> <!--飞鸟慕鱼博客-->
JQ代码
$("#button").click(function(){ $("p").fadeToggle("slow"); });