jQuery fadeOut 异步实例代码详解

定义和用法

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 异步实例代码详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • jQuery使用fadeout实现元素渐隐效果的方法

    本文实例讲述了jQuery使用fadeout实现元素渐隐效果的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码演示了jQuery控制色块元素逐渐隐藏的效果,可以控制隐藏速度 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $(&quo

  • js模拟jquery的slide和fadeIn和fadeOut功能

    就想了想 jquery是怎么实现的呢,无奈,哥能力差,还不到研究jquery源码的时候.那好吧,自己做个很简陋的版本,呵呵!好像还行,等哥的能力上去了再来优化下 三栏布局 #main1{ margin:20px auto; width:200px; background-color:#6c9; overflow:hidden; } var Animate = { obj : null, itime : 0, flag : 1, maxHeight : 0, _$ : function(id){

  • jQuery中fadeOut()方法用法实例

    本文实例讲述了jQuery中fadeOut()方法用法.分享给大家供大家参考.具体分析如下: 此方法通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数. fadeOut()方法的用法: 此方法可以规定动画效果的持续时间.例如: 复制代码 代码如下: $("div").fadeOut(5000) 以上代码规定div的淡出效果可在5000毫秒(5秒)内完成. 此方法也可以在动画完成后触发一个回调函数.例如: 复制代码 代码如下: $("div&q

  • jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)

    复制代码 代码如下: <head> <title></title> <style type="text/css"> #img1 { width:400px; height:500px; } </style> <script src="jquery-1.9.1.js" type="text/javascript"></script> <script type=

  • jquery (show,fadeOut,Animate)简单效果

    jquery show移上去看看 hello fadeout淡出效果 淡出效果淡出效果淡出效果淡出效果淡出效果 淡出效果淡出效果淡出效果淡出效果 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • jQuery动画效果-fadeIn fadeOut淡入浅出示例代码

    复制代码 代码如下: <html> <head> <meta charset="utf-8"/> <style> *{ margin:0; padding:0;} body{font-size:15px;} #container{ margin:60px; line-height:2em; width:300px; border:1px solid #CCC;} .head{ background:#999; padding:5px; c

  • jQuery fadeOut 异步实例代码详解

    定义和用法 fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(褪色效果). 注释:隐藏的元素不会被完全显示(不再影响页面的布局). 提示:该方法通常与 fadeIn() 方法一起使用. 语法 $(selector).fadeOut(speed,easing,callback) 1. 概述 jquery实现动画效果的函数使用起来很方便,不过动画执行是异步的,所以要把自定义的操作放在回调函数里. 2. example <html> <body> <table id

  • jQuery Ajax 全局调用封装实例代码详解

    有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人] jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="/js/jquery.mi

  • Java回调函数实例代码详解

    首先说说什么叫回调函数? 在WINDOWS中,程序员想让系统DLL调用自己编写的一个方法,于是利用DLL当中回调函数(CALLBACK)的接口来编写程序,使它调用,这个就 称为回调.在调用接口时,需要严格的按照定义的参数和方法调用,并且需要处理函数的异步,否则会导致程序的崩溃. 这样的解释似乎还是比较难懂,这里举个简 单的例子: 程序员A写了一段程序(程序a),其中预留有回调函数接口,并封装好了该程序.程序员B要让a调用自己的程序b中的一个方法,于是,他通过a中的接口回调自己b中的方法.目的达到

  • yii2中结合gridview如何使用modal弹窗实例代码详解

    在上篇文章给大家介绍了Yii2中如何使用modal弹窗(基本使用),即以创建为例. 实际开发中,我们往往还会遇到列表页数据修改要使用modal的情况,如果是一般的循环展示,相信大多数人看了modal的基本使用都会操作,但是结合gridview估计有些人就开始吃不消了,我们看看如何解决这个问题! 1.gridview的操作增加[更新]按钮,并指定data-toggle data-target class以及data-id的值 [ 'class' => 'yii\grid\ActionColumn'

  • JS动画实现回调地狱promise的实例代码详解

    1. js实现动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animate</title> <style> .ball { width: 40px; height: 40px; margin-bottom: 5px; border-radius: 20px; } .ball1 { ba

  • vue-better-scroll 的使用实例代码详解

    首先安装better-scroll npm i better-scroll -S goods页面模板 <template> <div class="goods"> <div class="menu-wrapper" ref="menuWrapper"> <ul> <li v-for="item in goods" class="menu-item">

  • Android快速开发系列 10个常用工具类实例代码详解

    打开大家手上的项目,基本都会有一大批的辅助类,今天特此整理出10个基本每个项目中都会使用的工具类,用于快速开发~~在此感谢群里给我发项目中工具类的兄弟/姐妹~ 1.日志工具类L.java package com.zhy.utils; import android.util.Log; /** * Log统一管理类 * * * */ public class L { private L() { /* cannot be instantiated */ throw new UnsupportedOpe

  • 在Ubuntu上搭建一个基于webrtc的多人视频聊天服务实例代码详解

    WebRTC,即Web Real-Time Communication,web实时通信技术.简单地说就是在web浏览器里面引入实时通信,包括音视频通话等. 在疫情期间哪里也去不了,在家没事就研究webrtc视频直播技术,网上找了些教程最终都不太能顺利跑起来的,可能是文章写的比较老,使用的一些开源组件已经更新了,有些配置已经不太一样了,所以按照以前的步骤会有问题.折腾了一阵终于跑起来了,记录一下. 一个简单的聊天室html页面 这个页面使用simple-webrtc来实现webrtc的通讯,sim

  • C#集合类用法实例代码详解

    下面介绍C#的集合类 1ArrayList using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Collections; namespace 动态数组ArrayList { class Program { static void Main(string[] args) { ArrayList

  • spring boot application properties配置实例代码详解

    废话不多说了,直接给大家贴代码了,具体代码如下所示: # =================================================================== # COMMON SPRING BOOT PROPERTIES # # This sample file is provided as a guideline. Do NOT copy it in its # entirety to your own application. ^^^ # ========

随机推荐