jQuery 提供了下面几种方法可以实现显示的淡入淡出效果:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
fadeIn()方法
fadeIn() 实现淡入效果,其基本语法如下 :
$(selector).fadeIn(speed,callback);
可选参数speed给出了淡入效果的时间,可以 使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在fadeIn()方法结束后调 用。
$("button").click(function(){ $("#center1").fadeIn(); $("#center2").fadeIn("slow"); $("#center3").fadeIn(3000); });
fadeOut()方法
fadeOut() 实现淡出效果,其基本语法如下:
$(selector).fadeOut(speed,callback);
可选参数speed给出了淡入效果的时间,可以 使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在fadeIn()方法结束后调 用。
$("button").click(function(){ $("#center1").fadeOut(); $("#center2").fadeOut("slow"); $("#center3").fadeOut(3000); });
fadeToggle()方法
fadeToggle() 交替进行fadeIn()和fadeOut(),如果元素是淡 出的,那么fadeToggle()将淡入该元素,如果之前是淡入的,fadeToggle将淡出该元素。
其基本语 法如下:
$(selector).fadeToggle(speed,callback);
可选参数speed给出了淡入效果的 时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在fadeIn()方 法结束后调用。
下面例子,点击按钮之后,可以交替淡出淡入三个矩形。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JQuery Demo</title> <script src="scripts/jquery-1.9.1.js"></script> <script> $(document).ready(function () { $("button").click(function () { $("#center1").fadeToggle(); $("#center2").fadeToggle("slow"); $("#center3").fadeToggle(3000); }); }); </script> </head> <body> <p>Demonstrate fadeToggle() with different speed parameters.</p> <button>Click to fade in/out boxes</button> <br> <br> <center id="center1" style="width: 80px; height: 80px; background-color: red;"></center> <br> <center id="center2" style="width: 80px; height: 80px; background-color: green;"></center> <br> <center id="center3" style="width: 80px; height: 80px; background-color: blue;"></center> </body> </html>
以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索参数
, 微秒
, 效果
, center
, 淡入淡出
, fadeOut
, fadein
, fadeout异步
, jQuery淡入淡出
, 淡入淡出显示
, 淡入方式
, 淡出淡入
, 淡出效果
淡出
jquery 淡入淡出 效果、jquery的淡入淡出效果、jquery 淡入淡出、jquery淡入淡出轮播图、jquery淡入淡出动画,以便于您获取更多的相关知识。