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控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
webpack 处理CSS资源的实现
Sep 27 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
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
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
php析构函数的简单使用说明
2015/08/24 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
Python中的闭包总结
2014/09/18 Python
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
python实现简单中文词频统计示例
2017/11/08 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
Python版中国省市经纬度
2020/02/11 Python
python语言的优势是什么
2020/06/17 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
自荐书范文
2013/12/08 职场文书
毕业典礼邀请函
2015/01/31 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书