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

jQuery 拖动层(在可视区域范围内)

May 24 Javascript

jquery插件冲突(jquery.noconflict)解决方法分享

Mar 20 Javascript

Javascript 5种方法实现过滤删除前后所有空格

Jun 22 Javascript

原生js实现自由拖拽弹窗代码demo

Jun 29 Javascript

jQuery获取this当前对象子元素对象的方法

Nov 29 Javascript

js实现手机发送验证码功能

Mar 13 Javascript

jQuery读取本地的json文件(实例讲解)

Oct 31 jQuery

使用javascript函数编写简单银行取钱存钱流程

May 26 Javascript

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

Apr 21 Javascript

vue-cli构建vue项目的步骤详解

Jan 27 Javascript

微信小程序地图绘制线段并且测量(实例代码)

Jan 02 Javascript

JavaScript实现简单的计算器

Jan 16 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项目应该注意的几点事项分享

2013/12/20 PHP

php使用base64加密解密图片示例分享

2014/01/20 PHP

yii2-GridView在开发中常用的功能及技巧总结

2017/01/07 PHP

PHP实现网页内容html标签补全和过滤的方法小结【2种方法】

2017/04/27 PHP

PHP中散列密码的安全性分析

2019/07/26 PHP

Javascript中获取出错代码所在文件及行数的代码

2010/09/23 Javascript

JQuery 绑定select标签的onchange事件，弹出选择的值，并实现跳转、传参

2011/01/06 Javascript

jquery实现多行文字图片滚动效果示例代码

2014/10/10 Javascript

JavaScript模拟实现继承的方法

2015/03/30 Javascript

使用jQuery给input标签设置默认值

2016/06/20 Javascript

原生JS和jQuery操作DOM对比总结

2017/01/19 Javascript

JavaScript实现时间表动态效果

2017/07/15 Javascript

Node.js中DNS模块学习总结

2018/02/28 Javascript

修改vue+webpack run build的路径方法

2018/09/01 Javascript

js代码规范之Eslint安装与配置详解

2018/09/08 Javascript

Vue指令指令大全

2019/02/09 Javascript

Vue服务端渲染实践之Web应用首屏耗时最优化方案

2019/03/22 Javascript

js中调用微信的扫描二维码功能的实现代码

2020/04/11 Javascript

Nest.js散列与加密实例详解

2021/02/24 Javascript

python将多个文本文件合并为一个文本的代码（便于搜索）

2011/03/13 Python

pygame学习笔记（3）：运动速率、时间、事件、文字

2015/04/15 Python

在java中如何定义一个抽象属性示例详解

2017/08/18 Python

tensorflow训练中出现nan问题的解决

2018/02/10 Python

详解Python中如何写控制台进度条的整理

2018/03/07 Python

Python装饰器用法实例总结

2018/05/26 Python

Pytorch之Variable的用法

2019/12/31 Python

用python批量下载apk

2020/12/29 Python

css3通过scale()、rotate()实现放大、旋转

2020/03/19 HTML / CSS

Penhaligon’s英国官网：成立于1870年的英国香水制造商

2021/02/18 全球购物

武汉世纪畅想数字传播有限公司 .NET笔试题

2015/06/13 面试题

什么是组件架构

2016/05/15 面试题

《两个铁球同时着地》教学反思

2014/02/13 职场文书

教师党的群众路线对照检查材料

2014/09/24 职场文书

反腐倡廉剖析材料

2014/09/30 职场文书

2016年“世界环境日”校园广播稿

2015/12/18 职场文书

简历自我评价：教师师德表现自我评价

2019/04/24 职场文书