jQuery中fadeOut()方法用法实例


Posted in Javascript onDecember 24, 2014

本文实例讲述了jQuery中fadeOut()方法用法。分享给大家供大家参考。具体分析如下:

此方法通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。

fadeOut()方法的用法:

此方法可以规定动画效果的持续时间。例如:

$("div").fadeOut(5000)

以上代码规定div的淡出效果可在5000毫秒(5秒)内完成。
此方法也可以在动画完成后触发一个回调函数。例如:

$("div").fadeOut(5000,function(){alert('动画效果完成!')})

以上代码能够在动画完成以后触发回调函数,于是弹出一个提示框。
实例代码:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="https://3water.com/" />

<title>fadeOut()函数-三水点靠木</title>

<style type="text/css">

div{

  background:#060;

  width:300px;

  height:300px;

  color:red

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){

  $("#up").click(function(){

    $("div").fadeOut(5000,function(){alert('动画效果完成!')});

  })

})

</script> 

</head>

<body>

  <div></div>

  <button id="up">点击查看效果</button>

</body>

</html>

以上代码点击按钮可以缓慢将div设置为透明效果,完全透明之后,然后指定回调函数。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
js控制框架刷新
Aug 01 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 Javascript
创建js对象和js类的方法汇总
Dec 24 #Javascript
javascript使用prototype完成单继承
Dec 24 #Javascript
jQuery中slideUp()方法用法分析
Dec 24 #Javascript
node.js开机自启动脚本文件
Dec 24 #Javascript
使用jquery动态加载js文件的方法
Dec 24 #Javascript
使用javascript实现Iframe自适应高度
Dec 24 #Javascript
常用的jQuery前端技巧收集
Dec 24 #Javascript
You might like
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
微信支付的开发流程详解
2016/09/13 PHP
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
Python实现Dijkstra算法
2018/10/17 Python
对python中的装包与解包实例详解
2019/08/24 Python
提升python处理速度原理及方法实例
2019/12/25 Python
python实现程序重启和系统重启方式
2020/04/16 Python
python飞机大战游戏实例讲解
2020/12/04 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
python接口自动化框架实战
2020/12/23 Python
html5定位并在百度地图上显示的示例
2014/04/27 HTML / CSS
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
一个SQL面试题
2014/08/21 面试题
大学生求职信怎么写
2015/03/19 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
mysql幻读详解实例以及解决办法
2022/06/16 MySQL