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 相关文章推荐
Js的MessageBox
Dec 03 Javascript
JavaScript 动态创建VML的方法
Oct 14 Javascript
js 格式化时间日期函数小结
Mar 20 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
简述JS控制台的使用
Jul 15 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
Jquery Fade用法详解
Nov 06 jQuery
使用js原生实现年份轮播选择效果实例
Jan 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下使用以下代码连接并测试
2008/04/09 PHP
php 字符转义 注意事项
2009/05/27 PHP
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
原生JS实现天气预报
2020/06/16 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
python判断正负数方式
2020/06/03 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
党员教师自我剖析材料
2014/09/29 职场文书
收银员岗位职责
2015/02/03 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
《月光曲》教学反思
2016/02/16 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android