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 相关文章推荐
jquery delay()介绍及使用指南
Sep 02 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
PHP利用COM对象访问SQLServer、Access
2006/10/09 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
PHP实现合并discuz用户
2015/08/05 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
javascript读取xml
2006/11/04 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
详解使用python crontab设置linux定时任务
2016/12/08 Python
Python编写登陆接口的方法
2017/07/10 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
python常用运维脚本实例小结
2020/02/14 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
数控技术应用个人求职信范文
2014/02/03 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
小学国庆节活动总结
2015/03/23 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python