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第三课 修改元素属性及内容的代码
Mar 14 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
理解JavaScript事件对象
Jan 25 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 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
php5.3 废弃函数小结
2010/05/16 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
Python创建数字列表的示例
2019/11/28 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
python中的对数log函数表示及用法
2020/12/09 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
学生个人自我鉴定
2014/03/26 职场文书
文案策划求职信
2014/04/14 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
运动会报道稿大全
2015/07/23 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python