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获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 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://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
Yii全局函数用法示例
2017/01/22 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
Three.js基础学习教程
2017/11/16 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
使用Python开发windows GUI程序入门实例
2014/10/23 Python
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
教你怎样写好自我评价
2013/10/05 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
十佳护士先进事迹
2014/05/08 职场文书
森林防火宣传标语
2014/06/27 职场文书
开展读书活动总结
2014/06/30 职场文书
优秀党员申报材料
2014/12/18 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
毕业证明书
2015/06/19 职场文书
采购员工作总结范文
2015/08/12 职场文书
Python列表的索引与切片
2022/04/07 Python