jQuery實現(xiàn)的具有淡出效果的元素刪除
默認(rèn)情況下，刪除元素一般都是瞬間完成的，這種效果未免不可。
但是感覺有點生硬，下面就分享一段能夠?qū)崿F(xiàn)淡出效果的元素刪除功能。
代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/jquery/1.9.0/jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$("#bt").click(function(){
$("#antzone").fadeTo("slow", 0.01,function(){
$(this).slideUp("slow", function(){
$(this).remove();
})
})
})
});
</script>
</head>
<body>
<div id="antzone"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>上面的代碼實現(xiàn)了此功能，下面介紹一下它的實現(xiàn)過程。
一.代碼注釋:
（1）.$(document).ready(function(){})，當(dāng)元素結(jié)構(gòu)完全加載完畢再去執(zhí)行函數(shù)中的代碼。（2）.$("#bt").click(function(){})，為按鈕注冊click事件處理函數(shù)。
（3）.$("#antzone").fadeTo("slow", 0.01,function(){
$(this).slideUp("slow", function(){
$(this).remove();
})
})，實現(xiàn)此效果其實就是利用了方法的回調(diào)函數(shù)，先設(shè)置透明度，然后在上拉，最后刪除。
（1）.fadeTo()方法可以參閱jQuery fadeTo()一章節(jié)。
（2）.slideUp()方法可以參閱jQuery slideUp()一章節(jié)。
（3）.remove()方法可以參閱jQuery slideUp()一章節(jié)。
相關(guān)推薦
-
jquery實現(xiàn)的通過左右方向鍵控制翻頁效果代碼實例
使用左右方向鍵控制翻頁效果也算是一種比較人性化的功能。其實代碼也非常的簡單，由于這里無法演示，只給出核心的代碼片段。應(yīng)該沒有什么難度，需要的朋友可以做一下參考。一.jQury代碼如下:$(docum
-
jquery實現(xiàn)的滑動軸效果代碼實例
本章節(jié)分享一段代碼實例，它實現(xiàn)了使用鼠標(biāo)鼠標(biāo)拖動元素滑動效果。也就是滑動軸效果，并且能夠選取數(shù)字，代碼實例如下:ut
-
js動態(tài)創(chuàng)建文本框代碼實例
本章節(jié)介紹一下如何動態(tài)的創(chuàng)建文本框，代碼非常的簡單。代碼如下: r
-
文本框失去焦點即刻進(jìn)行表單驗證代碼實例
大家可能都見過這樣的表單驗證效果，當(dāng)填寫完當(dāng)前文本框焦點離開后會立馬進(jìn)行表單驗證。下面就通過代碼實例介紹一下如何實現(xiàn)此功能。代碼如下:
-
點擊提交按鈕實現(xiàn)彈出警告框表單驗證效果
本章節(jié)介紹一下如何實現(xiàn)基本的表單驗證功能。最為常見的一種方式就是當(dāng)點擊提交按鈕的時候，如果有表單的內(nèi)容填寫不符合規(guī)范那么就會彈出警告框。代碼實例如下: h
