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国旗变换效果代码
Aug 13 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
elementui实现预览图片组件二次封装
Dec 29 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
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
php数组去重实例及分析
2013/11/26 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
php解决安全问题的方法实例
2019/09/19 PHP
50个比较实用jQuery代码段
2011/09/18 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
js操作二进制数据方法
2018/03/03 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
Python3中多线程编程的队列运作示例
2015/04/16 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
简单说说tomcat的配置
2013/05/28 面试题
财务会计专业个人求职信范本
2014/01/08 职场文书
周年庆典邀请函范文
2014/01/23 职场文书
《忆江南》教学反思
2014/04/07 职场文书
5s推行计划书
2014/05/06 职场文书
新闻通讯稿模板
2015/07/22 职场文书
2022微信温控新功能上线
2022/05/09 数码科技