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 相关文章推荐
Array.prototype.slice.apply的使用方法
Mar 17 Javascript
JavaScript插入动态样式实现代码
Feb 22 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
原生js实现碰撞检测
Mar 12 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
理解PHP5中static和const关键字的区别
2007/03/19 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
PHP 文件上传限制问题
2019/09/01 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
Python对象属性自动更新操作示例
2018/06/15 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
阿里旅行:飞猪
2017/01/05 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书