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函数、方法、对象代码
Oct 29 Javascript
比较搞笑的js陷阱题
Feb 07 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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
桌面中心(四)数据显示
2006/10/09 PHP
PHP基础学习小结
2011/04/17 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
Javascript中的数学函数集合
2007/05/08 Javascript
javascript 函数调用规则
2009/08/26 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
js跳转页面方法总结
2014/01/29 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
Python遍历pandas数据方法总结
2018/02/09 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
Python运行DLL文件的方法
2020/01/17 Python
浅析matlab中imadjust函数
2020/02/27 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
皮肤科医师岗位职责
2013/12/04 职场文书
小学生美德少年事迹
2014/02/02 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
设计师求职信模板
2014/05/06 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
检讨书范文
2015/01/27 职场文书
公司酒会致辞
2015/07/30 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python