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 25 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
在Node.js中使用Javascript Generators详解
May 05 Javascript
js select实现省市区联动选择
Apr 17 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
解析vue中的$mount
Dec 21 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
vue实现图片上传到后台
Jun 29 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 Javascript
JS的深浅复制详细
Oct 16 Javascript
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
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
python实现的生成word文档功能示例
2019/08/23 Python
python实现126邮箱发送邮件
2020/05/20 Python
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
中专生自我鉴定书范文
2013/12/28 职场文书
财务人员担保书
2014/05/13 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
门店业绩提升方案
2014/06/08 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
四年级数学教学反思
2016/02/16 职场文书
如何用python插入独创性声明
2021/03/31 Python
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python