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的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
node.js 如何监视文件变化
Sep 01 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编码规范-php coding standard
2007/03/16 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
JS实现的缓冲运动效果示例
2018/04/30 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
单位领导证婚词
2014/01/14 职场文书
创新型城市实施方案
2014/03/06 职场文书
运输服务质量承诺书
2014/03/27 职场文书
工作岗位职责范本
2015/02/15 职场文书
离婚民事起诉状
2015/08/03 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python