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 相关文章推荐
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
jquery 日期分离成年月日的代码
May 14 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 Javascript
javascript中的this详解
Dec 08 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 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删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
JavaScript 学习笔记(十一)
2010/01/19 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
Django密码系统实现过程详解
2019/07/19 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
学校司机岗位职责
2013/11/14 职场文书
爷爷追悼会答谢词
2014/01/24 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
2014年预算员工作总结
2014/12/05 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers
nginx七层负载均衡配置详解
2022/07/15 Servers
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技