jQuery fadeOut 異步實(shí)例代碼詳解
定義和用法
fadeOut() 方法逐漸改變被選元素的不透明度,從可見(jiàn)到隱藏(褪色效果)。
注釋:隱藏的元素不會(huì)被完全顯示(不再影響頁(yè)面的布局)。
提示:該方法通常與 fadeIn() 方法一起使用。
語(yǔ)法
$(selector).fadeOut(speed,easing,callback)
1. 概述
jquery實(shí)現(xiàn)動(dòng)畫(huà)效果的函數(shù)使用起來(lái)很方便,不過(guò)動(dòng)畫(huà)執(zhí)行是異步的,所以要把自定義的操作放在回調(diào)函數(shù)里。
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
上面的例子 ,回調(diào)函數(shù)可以用箭頭函數(shù)替代,
<script type="text/javascript">
$(function(){
'use strict';
(function(){
var tr = $("#test-table>tbody>tr:visible").first();
tr.fadeOut('4000', ()=>tr.remove());
})();
});
</script>
以上所述是小編給大家介紹的jQuery fadeOut 異步實(shí)例代碼詳解,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery向webApi提交post json數(shù)據(jù)
這篇文章主要介紹了jQuery向webApi提交post json數(shù)據(jù)的方法,非常不錯(cuò),需要的的朋友參考下2017-01-01
jquery京東商城雙11焦點(diǎn)圖多圖廣告特效代碼分享
這篇文章主要介紹了jquery京東商城雙11焦點(diǎn)圖多圖廣告特效,一個(gè)精致的焦點(diǎn)圖會(huì)吸引用戶的注意力,讓用戶產(chǎn)生瀏覽網(wǎng)站的興趣至關(guān)重要,現(xiàn)在小編推薦給大家一款特別棒的焦點(diǎn)圖,感興趣的小伙伴可以參考下。2015-09-09
Jquery實(shí)現(xiàn)控件的隱藏和顯示實(shí)例
本篇文章主要是對(duì)Jquery實(shí)現(xiàn)控件的隱藏和顯示實(shí)例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02
jQuery niceScroll滾動(dòng)條錯(cuò)位問(wèn)題的解決方法
下面小編就為大家?guī)?lái)一篇jQuery niceScroll滾動(dòng)條錯(cuò)位問(wèn)題的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Jquery實(shí)戰(zhàn)_讀書(shū)筆記1—選擇jQuery
近期公司積極組織我們這些開(kāi)發(fā)人員學(xué)習(xí)進(jìn)步,督促我們學(xué)習(xí)更多的技術(shù)來(lái)提高自己。為此我選擇了jQuery作為我學(xué)習(xí)的方向,同時(shí)我也是想將我的學(xué)習(xí)心得分享給大家,以后我會(huì)不斷的更新一系列jQuery方面的學(xué)習(xí)紀(jì)要,幫助大家學(xué)習(xí)。2010-01-01
jquery 結(jié)合C#后臺(tái)的數(shù)組對(duì)文章的關(guān)鍵字自動(dòng)添加鏈接的代碼
jquery 結(jié)合C#后臺(tái)的數(shù)組對(duì)文章的關(guān)鍵字自動(dòng)添加鏈接的代碼,需要的朋友可以參考下。2011-07-07

