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 相关文章推荐
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
vue实现购物车案例
May 30 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 Javascript
详解CocosCreator项目结构机制
Apr 14 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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
PHP 实例化类的一点摘记
2008/03/23 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
js同时按下两个方向键
2007/12/01 Javascript
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
如何编写jquery插件
2017/03/29 jQuery
用vue构建多页面应用的示例代码
2017/09/20 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
Python实现的简单算术游戏实例
2015/05/26 Python
python验证身份证信息实例代码
2019/05/06 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
大学竞选班长演讲稿
2014/04/24 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
出差报告怎么写
2014/11/06 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python
详解分布式系统中如何用python实现Paxos
2021/05/18 Python