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在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 Javascript
vue实现动态数据绑定
Apr 28 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 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
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
PHP中的替代语法介绍
2015/01/09 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
浅谈react前后端同构渲染
2017/09/20 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
Python如何实现文本转语音
2016/08/08 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
python3.4爬虫demo
2019/01/22 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
Python 实现一个简单的web服务器
2021/01/03 Python
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
行政专员工作职责
2013/12/22 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
2015年企业新年寄语
2014/12/08 职场文书
员工担保书范本
2015/09/22 职场文书
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL