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 相关文章推荐
javascipt基础内容--需要注意的细节
Apr 10 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
详解ES6 系列之异步处理实战
Oct 26 Javascript
原生JavaScript实现拖动校验功能
Sep 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 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
VBScript版代码高亮
2006/06/26 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
javasript实现密码的隐藏与显示
2015/05/08 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
python批量赋值操作实例
2018/10/22 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
中职应届生会计求职信
2013/10/23 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
投标承诺书范本
2014/03/27 职场文书
微笑服务标语
2014/06/24 职场文书
党员三严三实心得体会
2014/10/13 职场文书
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang