编程 Javascript

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程序设计有所帮助。

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

- Author -

上大王

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

ASP Json Parser修正版

Dec 06 Javascript

javascript得到当前页的来路即前一页地址的方法

Feb 18 Javascript

Node.js中对通用模块的封装方法

Jun 06 Javascript

复制网页内容，粘贴之后自动加上网址的实现方法(脚本之家特别整理)

Oct 16 Javascript

原生javascript获取元素样式

Dec 31 Javascript

jQuery版AJAX简易封装代码

Sep 14 Javascript

JavaScript对象引用与赋值实例详解

Mar 15 Javascript

js canvas实现放大镜查看图片功能

Jun 08 Javascript

Vue中的slot使用插槽分发内容的方法

Mar 01 Javascript

Vue刷新修改页面中数据的方法

Sep 16 Javascript

解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题

Nov 05 Javascript

vue 动态生成拓扑图的示例

Jan 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基础陷阱题(变量赋值)

2012/09/12 PHP

PHP中使用php5-ffmpeg撷取视频图片实例

2015/01/07 PHP

thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结

2019/10/10 PHP

xml 封装与解析(javascript和C#中)

2009/07/26 Javascript

jquery1.4.2 for Visual studio 2010 模板文件

2010/07/14 Javascript

6个DIV 135或246间隔一秒轮番显示效果

2010/07/24 Javascript

js实时监听文本框状态的方法

2011/04/26 Javascript

JavaScript实现多维数组的方法

2013/11/20 Javascript

JavaScript中的各种操作符使用总结

2016/05/26 Javascript

jQuery设计思想

2017/03/07 Javascript

socket.io学习教程之深入学习篇（三）

2017/04/29 Javascript

Web安全之XSS攻击与防御小结

2018/12/13 Javascript

JavaScript文本特效实例小结【3个示例】

2018/12/22 Javascript

微信小程序 setData 对 data数据影响问题

2019/04/18 Javascript

vue路由插件之vue-route

2019/06/13 Javascript

vue实现移动端省市区选择

2019/09/27 Javascript

VUE中鼠标滚轮使div左右滚动的方法详解

2020/12/14 Vue.js

[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming

2018/08/14 DOTA

详解django中自定义标签和过滤器

2017/07/03 Python

简单了解Python读取大文件代码实例

2019/12/18 Python

浅谈python 中的 type(), dtype(), astype()的区别

2020/04/09 Python

Python字典fromkeys()方法使用代码实例

2020/07/20 Python

python 基于Apscheduler实现定时任务

2020/12/15 Python

pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)

2020/12/16 Python

高清屏中使用Canvas绘图出现模糊的问题及解决方法

2019/06/03 HTML / CSS

为奢侈时尚带来了慈善元素：Olivela

2018/09/29 全球购物

群众路线批评与自我批评

2014/02/06 职场文书

给学校的建议书

2014/03/12 职场文书

股东授权委托书

2014/10/15 职场文书

秦始皇兵马俑导游词

2015/02/02 职场文书

财务总监岗位职责

2015/02/03 职场文书

公司行政助理岗位职责

2015/04/11 职场文书

关于幸福的感言

2015/08/03 职场文书

Nginx 负载均衡是什么以及该如何配置

2021/03/31 Servers

Mysql基础之常见函数

2021/04/22 MySQL

Oracle11g R2 安装教程完整版

2021/06/04 Oracle