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对象的函数
Dec 22 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
Vue底层实现原理总结
Feb 17 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
如何实现小程序tab栏下划线动画效果
May 18 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
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
js实现仿购物车加减效果
2017/03/01 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
在Django的视图中使用form对象的方法
2015/07/18 Python
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
python构建深度神经网络(续)
2018/03/10 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
Python3解释器知识点总结
2019/02/19 Python
python跳出双层for循环的解决方法
2019/06/24 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
python获取array中指定元素的示例
2019/11/26 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
党员个人思想汇报
2013/12/28 职场文书
给水工程专业毕业生自荐信
2014/01/28 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
婚内分居协议书范文
2014/11/26 职场文书
新郎结婚感言
2015/07/31 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
详解Redis瘦身指南
2021/05/26 Redis
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android