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 相关文章推荐
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
js arguments对象应用介绍
Nov 28 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
jquery实现吸顶导航效果
Jan 08 jQuery
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图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
在Pandas中处理NaN值的方法
2019/06/25 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
区域销售经理职责
2013/12/22 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
Python基本数据类型之字符串str
2021/07/21 Python