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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
有道JavaScript监听浏览器的问题
Jun 23 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 Javascript
JS搜狐面试题分析
Dec 16 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
我的论坛源代码(十)
2006/10/09 PHP
ajax缓存问题解决途径
2006/12/06 PHP
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
Python学习笔记之os模块使用总结
2014/11/03 Python
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Python中return语句用法实例分析
2015/08/04 Python
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
幼儿园中秋节活动方案
2014/02/06 职场文书
运动会方阵解说词
2014/02/12 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
记者节感言
2015/08/03 职场文书