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

js判断输入是否为数字的具体实例

Aug 03 Javascript

JS模拟自动点击的简单实例

Aug 08 Javascript

零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门

Dec 20 Javascript

Javascript原型链的原理详解

Jan 05 Javascript

jquery显示隐藏元素的实现代码

May 19 Javascript

AngularJS 入门教程之事件处理器详解

Aug 19 Javascript

vue几个常用跨域处理方式介绍

Feb 07 Javascript

JS实现监控微信小程序的原理

Jun 15 Javascript

微信小程序scroll-view仿拼多多横向滑动滚动条

Apr 21 Javascript

从0到1构建vueSSR项目之node以及vue-cli3的配置

Mar 07 Javascript

JS/CSS实现字符串单词首字母大写功能

Sep 03 Javascript

vue实现移动端拖动排序

Aug 21 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

解决中英文字符串长度问题函数

2007/01/16 PHP

php下使用strpos需要注意 === 运算符

2010/07/17 PHP

php制作动态随机验证码

2015/02/12 PHP

PHP7下协程的实现方法详解

2017/12/17 PHP

Laravel框架实现的rbac权限管理操作示例

2019/01/16 PHP

刷新时清空文本框内容的js代码

2007/04/23 Javascript

js DOM模型操作

2009/12/28 Javascript

js 函数的副作用分析

2011/08/23 Javascript

location.href用法总结(最主要的)

2013/12/27 Javascript

JavaScript定义类的几种方式总结

2014/01/06 Javascript

在javascript中如何得到中英文混合字符串的长度

2014/01/17 Javascript

纯css+js写的一个简单的tab标签页带样式

2014/01/28 Javascript

聊一聊JavaScript作用域和作用域链

2016/05/03 Javascript

VueJs与ReactJS和AngularJS的异同点

2016/12/12 Javascript

详谈jQuery unbind 删除绑定事件 / 移除标签方法

2017/03/02 Javascript

BackBone及其实例探究_动力节点Java学院整理

2017/07/14 Javascript

json2.js 入门教程之使用方法与实例分析

2017/09/14 Javascript

分享一个vue项目“脚手架”项目的实现步骤

2019/05/26 Javascript

JS实现给数组对象排序的方法分析

2019/06/24 Javascript

小程序实现层叠卡片滑动效果

2019/08/26 Javascript

vue vantUI实现文件（图片、文档、视频、音频）上传（多文件）

2019/10/15 Javascript

深入理解 TypeScript Reflect Metadata

2019/12/12 Javascript

vue flex 布局实现div均分自动换行的示例代码

2020/08/05 Javascript

OpenLayer3自定义测量控件MeasureTool

2020/09/28 Javascript

[00:53]TI3正赛第三天 DK怒破A队不败金身现场国旗飘扬热血激昂

2013/08/10 DOTA

[00:47]DOTA2荣耀之路6：玩不了啦！

2018/05/30 DOTA

Python 利用高德地图api实现经纬度与地址的批量转换

2019/08/14 Python

PyInstaller将Python文件打包为exe后如何反编译（破解源码）以及防止反编译

2020/04/15 Python

python3.7中安装paddleocr及paddlepaddle包的多种方法

2020/11/27 Python

托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别

2014/09/29 面试题

担保书格式及范文

2014/04/01 职场文书

清明祭英烈活动总结

2015/05/11 职场文书

2015年反腐倡廉工作总结

2015/05/14 职场文书

Ajax常用封装库——Axios的使用

2021/05/08 Javascript

MySQL数据库10秒内插入百万条数据的实现

2021/11/01 MySQL

Python 居然可以在 Excel 中画画你知道吗

2022/02/15 Python