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 相关文章推荐
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 Javascript
Vue中的组件及路由使用实例代码详解
May 22 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写的采集程序
2007/03/16 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
xtree.js 代码
2007/03/13 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
javascript实现微信分享
2014/12/23 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
js闭包学习心得总结
2018/04/17 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
python通过ssh-powershell监控windows的方法
2015/06/02 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
Python eval函数原理及用法解析
2020/11/14 Python
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
Shell如何接收变量输入
2012/09/24 面试题
构造方法和其他方法的区别
2016/04/26 面试题
庆七一活动方案
2014/01/25 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python