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 相关文章推荐
jquery ajax执行后台方法
Mar 18 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 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判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
财务管理职业生涯规划书
2014/02/26 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
元旦标语大全
2014/10/09 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
阿凡达观后感
2015/06/10 职场文书
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB