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 相关文章推荐
JS中的数组的sort方法使用示例
Jan 22 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
谈一谈javascript闭包
Jan 28 Javascript
jQuery ajax应用总结
Jun 02 Javascript
JS匿名函数实例分析
Nov 26 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
php模拟js函数unescape的函数代码
2012/10/20 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
PHP调用其他文件中的类
2018/04/02 PHP
javascript iframe编程相关代码
2009/12/28 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
python中for in的用法详解
2020/04/17 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
全球度假村:Club Med
2017/11/27 全球购物
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
会议室标语
2014/06/21 职场文书
物流专业求职信
2014/06/30 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
新郎答谢词
2015/01/04 职场文书
Django中session进行权限管理的使用
2021/07/09 Python
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫
基于redis+lua进行限流的方法
2022/07/23 Redis