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 相关文章推荐
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
node.js require() 源码解读
Dec 13 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
详解angular element()方法使用
Apr 08 Javascript
发布Angular应用至生产环境的方法
Dec 10 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 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.ini)
2016/05/20 PHP
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
python字符串的方法与操作大全
2018/01/30 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
简单了解Python3里的一些新特性
2019/07/13 Python
python tornado使用流生成图片的例子
2019/11/18 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
详解Python中的文件操作
2021/01/14 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
乡镇庆八一活动方案
2014/02/02 职场文书
元旦寄语大全
2014/04/10 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
检察院起诉书
2015/05/20 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python