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 相关文章推荐
JS中数组Array的用法示例介绍
Feb 20 Javascript
jquery常用的12个小功能
Jul 22 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
ES6中Promise的使用方法实例总结
Feb 18 Javascript
vue穿梭框实现上下移动
Jan 29 Vue.js
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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
解析yii数据库的增删查改
2013/06/20 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
Javascript函数的参数
2015/07/16 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
vue-router传参用法详解
2019/01/19 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
利用Python查看目录中的文件示例详解
2017/08/28 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
党的群众路线学习材料
2014/05/16 职场文书
故意杀人案辩护词
2015/05/21 职场文书
新郎婚礼致辞
2015/07/27 职场文书
军训后的感想
2015/08/07 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
nginx共享内存的机制详解
2022/03/21 Servers