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 相关文章推荐
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
编程语言JavaScript简介
Oct 16 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 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数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
Javascript 继承实现例子
2009/08/12 Javascript
js文件中调用js的实现方法小结
2009/10/23 Javascript
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
Python selenium 三种等待方式解读
2016/09/15 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
set在python里的含义和用法
2019/06/24 Python
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
化学教师自荐信范文
2013/12/28 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
致共产党员倡议书
2014/04/16 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
法人代表证明书范本
2015/06/18 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android