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 面向对象的 私有成员和公开成员
May 13 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
JavaScript实现区块链
Mar 14 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
Vue实现多标签选择器
Nov 28 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 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
中秋节超市促销方案
2014/01/30 职场文书
英文导游词
2015/02/13 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
python文件与路径操作神器 pathlib
2022/04/01 Python