编程 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 相关文章推荐

HTML页面登录时的JS验证方法

May 28 Javascript

关于javascript中限定时间内防止按钮重复点击的思路详解

Aug 16 Javascript

jsTree使用记录实例

Dec 01 Javascript

js倒计时显示实例

Dec 11 Javascript

Angular.js中定时器循环的3种方法总结

Apr 27 Javascript

利用 spin.js 生成等待效果(js 等待效果)

Jun 25 Javascript

jQuery实现上传图片前预览效果功能

Aug 03 jQuery

微信小程序实现图片上传功能实例（前端+PHP后端）

Jan 10 Javascript

vue实现选项卡及选项卡切换效果

Apr 24 Javascript

vue 2.1.3 实时显示当前时间,每秒更新的方法

Sep 16 Javascript

Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)

Apr 27 Javascript

Electron+vue从零开始打造一个本地播放器的方法示例

Oct 27 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生成带有雪花背景的验证码

2006/10/09 PHP

php为字符串前后添加指定数量字符的方法

2015/05/04 PHP

thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)

2016/05/27 PHP

PHP实现导出excel数据的类库用法示例

2016/10/15 PHP

PHP实现的迪科斯彻(Dijkstra)最短路径算法实例

2017/09/16 PHP

PHP设计模式（八）装饰器模式Decorator实例详解【结构型】

2020/05/02 PHP

jquery获取特定name所有选中的checkbox,支持IE9标准模式

2013/03/18 Javascript

JS获取URL中参数值（QueryString）的4种方法分享

2014/04/12 Javascript

JQuery $.each遍历JavaScript数组对象实例

2014/09/01 Javascript

javascript转换静态图片，增加粒子动画效果

2015/05/28 Javascript

精通JavaScript的this关键字

2020/05/28 Javascript

javascript移动开发中touch触摸事件详解

2016/03/18 Javascript

基于javascript实现tab选项卡切换特效调试笔记

2016/03/30 Javascript

如何让一个json文件显示在表格里【实现代码】

2016/05/09 Javascript

jQuery Ajax 上传文件处理方式介绍(推荐)

2016/06/30 Javascript

BootStrap中的表单大全

2016/09/07 Javascript

JavaScript实现带有子菜单和控件的slider轮播图效果

2017/11/01 Javascript

vue.js简单配置axios的方法详解

2017/12/13 Javascript

利用VS Code开发你的第一个AngularJS 2应用程序

2017/12/15 Javascript

vue.js与后台数据交互的实例讲解

2018/08/08 Javascript

浅析vue插槽和作用域插槽的理解

2019/04/22 Javascript

Python中使用Inotify监控文件实例

2015/02/14 Python

Python文件与文件夹常见基本操作总结

2016/09/19 Python

pyqt5利用pyqtDesigner实现登录界面

2019/03/28 Python

使用python判断jpeg图片的完整性实例

2019/06/10 Python

Python MongoDB 插入数据时已存在则不执行，不存在则插入的解决方法

2019/09/24 Python

Python基于gevent实现高并发代码实例

2020/05/15 Python

PyQt5的相对布局管理的实现

2020/08/07 Python

PyTorch 导数应用的使用教程

2020/08/31 Python

使用Python实现NBA球员数据查询小程序功能

2020/11/09 Python

美国医疗用品、医疗设备和家庭保健用品商店：Medical Supply Depot

2018/07/08 全球购物

建筑系毕业生自我鉴定

2014/01/24 职场文书

主办会计岗位职责

2014/03/13 职场文书

办公用品管理制度

2015/08/04 职场文书

企业愿景口号

2015/12/25 职场文书

Golang实现AES对称加密的过程详解

2021/05/20 Golang