jQuery |淡入淡出
通过 jQuery,您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
下面一一介绍
jQuery fadeIn() 方法淡入已隐藏的元素
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。.
实例:带有不同参数的 fadeIn() 方法
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
尝试一下 »
淡出fadeOut() 方法用于淡出可见元素。
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
可选的 speed参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback参数是 fading 完成后所执行的函数名称。
示例:带有不同参数的 fadeOut() 方法
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
尝试一下 »
jQuery fadeToggle() 方法在 fadeIn() 与 fadeOut() 方法之间进行切换
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
语法:
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
示例带有不同参数的 fadeToggle() 方法
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
尝试一下 »
jQuery fadeTo() 方法渐变为给定的不透明度(值介于 0 与 1 之间)
语法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
实例带有不同参数的 fadeTo() 方法
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
尝试一下 »
jQuery |淡入淡出相关推荐
- jQuery 淡入淡出
jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...
- Web入门:JQuery淡入淡出面板
欢迎来的我的小院,恭喜你今天又要涨知识了! 案例内容 利用JQuery的fadeToggle() 方法,完成面板淡入淡出. 演示 学习 <!DOCTYPE html> <html l ...
- jQuery 淡入淡出、滑动和动画
一.淡入淡出 1.jQuery fadeIn() 方法 jQuery fadeIn() 用于淡入已隐藏的元素. 语法:$(selector).fadeIn(speed,callback); 可选的 s ...
- jQuery淡入淡出fadeIn() fadeOut() fadeToggle() fadeTo()
通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fadeTo() 1,jQuery f ...
- jquery淡入淡出效果及突出显示案例
fadeToggle方法可以动态地让淡入淡出相互切换 fadeTO方法淡入淡出到指定透明度 使用fadeTo方法让元素透明度淡入到0时,这个元素还是会保留原有位置的宽和高,只不过是透明度透明了而已 从 ...
- jQuery:jQuery淡入淡出效果语法及修改透明度fadeTo()
1.淡入效果: fadeIn([speed],[easing]),[fn]; 淡入效果参数: 参数是可以都省略的,和之前show().hide()参数一样: speed:有slow.normal.fa ...
- 【jQuery笔记Part2】04-jQuery淡入淡出动画右下角广告案例
jQuery淡入淡出动画-右下角广告 CSS display 属性 淡入淡出动画案例 jQuery笔记目录 CSS display 属性 display 属性规定元素应该生成的框的类型. 值 描述 n ...
- html5页面滑入滑出效果,jQuery实现的淡入淡出与滑入滑出效果示例
本文实例讲述了jQuery实现的淡入淡出与滑入滑出效果.分享给大家供大家参考,具体如下: 1. 淡入淡出效果: 我们做这样一个实例: 有两个按钮,点击淡入,有一个div层淡入,点击淡出,div层淡出: ...
- 004_淡入淡出效果
1. jQuery淡入淡出方法 1.1. 通过jQuery, 您可以实现元素的淡入淡出效果. 1.2. jQuery拥有下面四种fade方法: fadeIn().fadeOut().fadeToggl ...
最新文章
- WPF XAML 资源样式模板属性存放位置
- skyline粒子效果xml获取
- 构建LINUX下的入侵检测系统——LIDS 系统管理命令--vlock
- python获取文件夹下所有文件的两种方式
- 特征工程之归一化及标准化
- oracle常见受权与回收权限 grant和revoke
- IOS用标签显示滑块的值
- Dijkstra + 堆优化
- python 图像倾斜校正_通过OpenCV和Python进行文本倾斜校正
- Java项目(一):家庭收支记账软件
- python--超市水果销售系统2.0
- 由于您的系统没有安装html help,教你解决Chrome浏览器未安装flash控件方法
- excel实现分组计数
- java物联网第三天 智慧农业物联网
- Go2sky -- Golang用skywalking实现全链路追踪
- jsp外文期刊免费下载_外文期刊下载
- java对zip、rar、7z文件带密码解压实例
- 王者荣耀模型制作曝光
- linux运算圆周率代码,计算圆周率pi的代码
- graphpad7.04多组比较p值_手把手教你用Graphpad做单因素方差分析
热门文章
- boost::fusion::result_of::as_vector用法的测试程序
- GDCM:解析XPATH文件的测试程序
- GDCM:gdcm::TransferSyntax的测试程序
- boost::core::is_same用法测试实例
- boost:验证Boost的BOOST_CLASS_REQUIRE宏
- boost::contract模块实现separate body的测试程序
- Boost:基于boost::asio的延迟udp服务器测试程序
- Boost:以协程的方式实现带有默认值的echo服务器的实例
- ITK:优化简单的抛物面函数
- ITK:将ITK灰度图像转换为CV :: Mat