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 相关文章推荐
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
JavaScript Event Loop相关原理解析
Jun 10 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
一个odbc连mssql分页的类
2006/10/09 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
javascript 简练的几个函数
2009/08/29 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
Python实时获取cmd的输出
2015/12/13 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
优秀毕业自我鉴定
2014/02/15 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
社区重阳节活动总结
2015/03/24 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
vue实现移动端div拖动效果
2022/03/03 Vue.js
SQL Server 中的事务介绍
2022/05/20 SQL Server