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 相关文章推荐
JavaScript 拖拉缩放效果
Dec 10 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
js精度溢出解决方案
Dec 02 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
vue实现页面滚动到底部刷新
Aug 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
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
php 实现进制相互转换
2016/04/07 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
Javascript读取cookie函数代码
2010/10/16 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
Python接收手机短信的代码整理
2020/08/02 Python
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
工程招投标邀请书
2014/01/26 职场文书
师德模范事迹材料
2014/06/03 职场文书
机电一体化专业求职信
2014/07/22 职场文书
大班上学期个人总结
2015/02/13 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
七年级话题作文之执着
2019/11/19 职场文书
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS