jQuery 入门教程(6): 淡入淡出效果
2013-03-08 08:27
621 查看
jQuery 提供了下面几种方法可以实现显示的淡入淡出效果:fadeIn()
fadeOut()
fadeToggle()
fadeTo()
fadeIn()方法fadeIn() 实现淡入效果,其基本语法如下:$(selector).fadeIn(speed,callback);可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在fadeIn()方法结束后调用。
fadeOut()方法fadeOut() 实现淡出效果,其基本语法如下:$(selector).fadeOut(speed,callback);可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在fadeIn()方法结束后调用。
fadeToggle()方法fadeToggle() 交替进行fadeIn()和fadeOut(),如果元素是淡出的,那么fadeToggle()将淡入该元素,如果之前是淡入的,fadeToggle将淡出该元素。
其基本语法如下:$(selector).fadeToggle(speed,callback);可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在fadeIn()方法结束后调用。
下面例子,点击按钮之后,可以交替淡出淡入三个矩形。
fadeTo()方法fadeTo() 实现淡化到指定的透明度,其基本语法如下:$(selector).fadeTo(speed,opacity,callback);必需参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个必须参数为透明度,值域为0到1之间。
可选参数为回调函数,在fadeIn()方法结束后调用。
fadeOut()
fadeToggle()
fadeTo()
fadeIn()方法fadeIn() 实现淡入效果,其基本语法如下:$(selector).fadeIn(speed,callback);可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在fadeIn()方法结束后调用。
$("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); });
fadeOut()方法fadeOut() 实现淡出效果,其基本语法如下:$(selector).fadeOut(speed,callback);可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在fadeIn()方法结束后调用。
$("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").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 () { $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); }); </script> </head> <body> <p>Demonstrate fadeToggle() with different speed parameters.</p> <button>Click to fade in/out boxes</button> <br> <br> <div id="div1" style="width: 80px; height: 80px; background-color: red;"></div> <br> <div id="div2" style="width: 80px; height: 80px; background-color: green;"></div> <br> <div id="div3" style="width: 80px; height: 80px; background-color: blue;"></div> </body> </html>
fadeTo()方法fadeTo() 实现淡化到指定的透明度,其基本语法如下:$(selector).fadeTo(speed,opacity,callback);必需参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个必须参数为透明度,值域为0到1之间。
可选参数为回调函数,在fadeIn()方法结束后调用。
$("button").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7); });
相关文章推荐
- jQuery 入门教程(6): 淡入淡出效果
- jQuery 入门教程(6): 淡入淡出效果
- jQuery快速入门基础教程之效果(三)
- jQuery 入门教程(7): 滑动效果
- jQuery学习教程五:jQuery 效果 - 淡入淡出, Fading 方法
- jQuery 入门教程(8): 动画效果
- jQuery 入门教程(8): 动画效果
- BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)
- jQuery 入门教程(7): 滑动效果
- jQuery 入门教程(7): 滑动效果
- jQuery 入门教程(8): 动画效果
- 制作淡入淡出效果的JQuery插件
- jQuery 入门教程(4): Events
- 随机字符变换效果的jQuery插件开发教程
- jQuery 入门教程(18): 操作HTML元素的大小
- jQueryUI Autocomplete插件使用入门教程(最新版)---------转载
- jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
- jQuery 入门教程(21): jQuery UI 示例
- Genesis-3D 入门教程—26.后处理四:锐化效果
- jQuery 入门教程(24): jQuery UI Autocomplete示例(二)