jQuery fadeOut 异步实例代码详解


Posted in Javascript onAugust 18, 2016

定义和用法

fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(褪色效果)。

注释:隐藏的元素不会被完全显示(不再影响页面的布局)。

提示:该方法通常与 fadeIn() 方法一起使用。

语法

$(selector).fadeOut(speed,easing,callback)

1. 概述

jquery实现动画效果的函数使用起来很方便,不过动画执行是异步的,所以要把自定义的操作放在回调函数里。

2. example

<html>
<body>
<table id="test-table">
<tbody>
<tr>
<td>zhangsan</td>
<td>23</td>
<td>hunan</td></tr>
<tr>
<td>zhangsan2</td>
<td>233</td>
<td>hunan2</td></tr>
<tr>
<td>zhangsan3</td>
<td>234</td>
<td>hunan4</td></tr>
<tr>
<td>zhangsan5</td>
<td>235</td>
<td>hunan5</td></tr>
</tbody>
</table>
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function(){
'use strict';
(function(){
var tr = $("#test-table>tbody>tr:visible").first();
tr.fadeOut('4000', function(){ $(this).remove()});
})();
});
</script>
</body>
</html>

3. something

上面的例子 ,回调函数可以用箭头函数替代,

<script type="text/javascript">
$(function(){
'use strict';
(function(){
var tr = $("#test-table>tbody>tr:visible").first();
tr.fadeOut('4000', ()=>tr.remove());
})();
});
</script>

以上所述是小编给大家介绍的jQuery fadeOut 异步实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 提升运行速度之循环篇 译文
Aug 15 Javascript
JS获取父节点方法
Aug 20 Javascript
元素绑定click点击事件方法
Jun 08 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
layui导航栏实现代码
May 19 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
AngularJS 工作原理详解
Aug 18 #Javascript
js H5 canvas投篮小游戏
Aug 18 #Javascript
jQuery过滤选择器经典应用
Aug 18 #Javascript
jQuery表单事件实例代码分享
Aug 18 #Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 #Javascript
AngularJS 执行流程详细介绍
Aug 18 #Javascript
AngularJS国际化详解及示例代码
Aug 18 #Javascript
You might like
推荐个功能齐全的发送PHP邮件类
2007/01/03 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
js 窗口抖动示例
2013/09/04 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Python中的匿名函数使用简介
2015/04/27 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
python if not in 多条件判断代码
2016/09/21 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
C语言中break与continue的区别
2012/07/12 面试题
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
采购主管的岗位职责
2013/12/17 职场文书
班风学风建设方案
2014/05/06 职场文书
党支部对照检查材料
2014/08/25 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
Python 如何安装Selenium
2021/05/06 Python
python opencv通过4坐标剪裁图片
2021/06/05 Python
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python