jQuery使用fadeout实现元素渐隐效果的方法


Posted in Javascript onMarch 27, 2015

本文实例讲述了jQuery使用fadeout实现元素渐隐效果的方法。分享给大家供大家参考。具体分析如下:

下面的JS代码演示了jQuery控制色块元素逐渐隐藏的效果,可以控制隐藏速度

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
 });
});
</script>
</head>
<body>
<p>Demonstrate fadeOut() with different parameters.</p>
<button>Click to fade 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>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
Javascript 解疑
Nov 11 Javascript
js 格式化时间日期函数小结
Mar 20 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
javascript包装对象实例分析
Mar 27 #Javascript
javascript操作select元素实例分析
Mar 27 #Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 #Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 #Javascript
jquery使用animate方法实现控制元素移动
Mar 27 #Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 #Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 #Javascript
You might like
用PHP制作静态网站的模板框架(一)
2006/10/09 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
基于jquery的Repeater实现代码
2010/07/17 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
Keras设置以及获取权重的实现
2020/06/19 Python
Pycharm中如何关掉python console
2020/10/27 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
正隆泰信息技术有限公司上机题
2012/06/14 面试题
化学学院毕业生自荐信范文
2013/12/17 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
祝酒词范文
2015/08/12 职场文书