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 相关文章推荐
Extjs学习笔记之六 面版
Jan 08 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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 empty函数 使用说明
2009/08/10 PHP
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
python简单实现基数排序算法
2015/05/16 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
利用python开发app实战的方法
2019/07/09 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Python生成器常见问题及解决方案
2020/03/21 Python
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
实习生自我评价
2014/01/18 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL