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 相关文章推荐
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
JavaScript 构造函数 面相对象学习必备知识
Jun 09 Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
jQuery.each使用详解
Jul 07 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
Vue制作Todo List网页
Apr 26 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 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延迟静态绑定示例分享
2014/06/22 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
js change,propertychange,input事件小议
2011/12/20 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
微信小程序绑定手机号获取验证码功能
2019/10/22 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
pyenv命令管理多个Python版本
2017/03/26 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
Django之模板层的实现代码
2019/09/09 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
python中实现栈的三种方法
2020/12/19 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
编程输出如下图形
2013/11/24 面试题
外贸学院会计专业应届生求职信
2013/11/14 职场文书
教导处工作制度
2014/01/18 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
MyBatis 动态SQL全面详解
2021/10/05 MySQL
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL
vue+iview实现手机号分段输入框
2022/03/25 Vue.js