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 相关文章推荐
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 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设计模式 Command(命令模式)
2011/06/26 PHP
php解析url的三个示例
2014/01/20 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
在vue中安装使用vux的教程详解
2018/09/16 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
详解Python中最难理解的点-装饰器
2017/04/03 Python
python实现list由于numpy array的转换
2018/04/04 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
Django 路由控制的实现
2019/07/17 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
七一党建活动方案
2014/01/28 职场文书
先进个人自荐书
2015/03/06 职场文书
2015年双拥工作总结
2015/04/08 职场文书
检察院起诉书
2015/05/20 职场文书
庆七一晚会主持词
2015/06/30 职场文书