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 二分法(数组array)
Apr 24 Javascript
Javascript 面向对象 继承
May 13 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
Node.js使用Koa搭建 基础项目
Jan 08 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 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
php include,include_once,require,require_once
2008/09/05 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
Python中%r和%s的详解及区别
2017/03/16 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
Python统计单词出现的次数
2018/04/04 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
详解python里的命名规范
2018/07/16 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
大学生物业管理求职信
2013/10/24 职场文书
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
金融行业务员的自我评价
2013/12/13 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
学校班班通实施方案
2014/06/11 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
婚育证明样本
2015/06/16 职场文书