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 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
JavaScript 格式字符串的应用
Mar 29 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
js图片延迟加载的实现方法及思路
Jul 22 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 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环境搭建最新方法
2006/09/05 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
python的id()函数解密过程
2012/12/25 Python
Python构造函数及解构函数介绍
2015/02/26 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
使用python实现滑动验证码功能
2019/08/05 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
幼儿园家长会欢迎词
2014/01/09 职场文书
五型班组建设方案
2014/02/10 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
军训通讯稿范文
2015/07/18 职场文书
2016年国陪研修感言
2015/11/18 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
nginx.conf配置文件结构小结
2022/04/08 Servers
Spring 使用注解开发
2022/05/20 Java/Android