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移动端图片上传组件
Jun 12 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 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动态创建Flash动画
2006/10/09 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
php关联数组快速排序的方法
2015/04/17 PHP
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
js轮播图的插件化封装详解
2017/07/17 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
使用python解析xml成对应的html示例分享
2014/04/02 Python
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
Python守护线程用法实例
2017/06/23 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
Python实现石头剪刀布游戏
2021/01/20 Python
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
生产主管岗位职责
2013/11/10 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
Python MNIST手写体识别详解与试练
2021/11/07 Python
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js