jQuery實現的具有淡出效果的元素刪除
預設情況下,刪除元素一般都是瞬間完成的,這種效果未免不可。
但是感覺有點生硬,下面就分享一段能夠實現淡出效果的元素刪除功能。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #antzone{ width:200px; height:100px; background:#ccc; } </style> <script src="http://libs.baidu.com/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>
上面的程式碼實現了此功能,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).$(document).ready(function(){}),當元素結構完全載入完畢再去執行函式中的程式碼。(2).$("#bt").click(function(){}),為按鈕註冊click事件處理函式。
(3).$("#antzone").fadeTo("slow", 0.01,function(){
$(this).slideUp("slow", function(){
$(this).remove();
})
}),實現此效果其實就是利用了方法的回撥函式,先設定透明度,然後在上拉,最後刪除。
二.相關閱讀:
(1).fadeTo()方法可以參閱jQuery fadeTo()一章節。
(2).slideUp()方法可以參閱jQuery slideUp()一章節。
(3).remove()方法可以參閱jQuery slideUp()一章節。
相關文章
- jQuery實現的元素淡入淡出動畫效果jQuery動畫
- jQuery刪除具有指定文字的li元素jQuery
- 實現元素的淡入淡出效果
- jQuery 實現淡入淡出效果jQuery
- jQuery動畫效果的刪除行效果jQuery動畫
- jQuery實現的刪除指定子元素程式碼例項jQuery
- jQuery刪除元素jQuery
- jQuery 刪除元素jQuery
- jQuery實現的為元素新增或者刪除class樣式類jQuery
- jQuery 效果 – 淡入淡出jQuery
- jquery實現的具有漸變效果的圖片切換jQuery
- javascript刪除具有指定文字內容的li元素JavaScript
- jQuery刪除指定子元素jQuery
- jQuery刪除指定li元素jQuery
- jQuery實現對陣列元素的轉換效果jQuery陣列
- jQuery 04 效果 淡入淡出jQuery
- jquery實現增加刪除行jQuery
- jQuery如何刪除元素節點jQuery
- jQuery 刪除當前li元素jQuery
- Stickup – 輕鬆實現元素固定效果的 jQuery 外掛jQuery
- jquery中淡入淡出效果案例jQuery
- jQuery實現的表格新增或者刪除行操作jQuery
- jQuery為元素新增和刪除classjQuery
- jQuery如何新增和刪除元素jQuery
- jQuery實現的但行文字具有時間間隔向上滾動效果jQuery
- jquery實現的全選和刪除功能外掛jQuery
- javascript實現的淡入淡出效果程式碼例項JavaScript
- jquery實現的元素以動畫方式移動和漸變效果jQuery動畫
- jquery刪除指定元素程式碼例項jQuery
- jQuery點選按鈕刪除div元素jQuery
- jquery獲取具有指定內容的元素jQuery
- jQuery如何篩選具有指定文字的元素jQuery
- jQuery實現的對元素的增刪改查程式碼例項jQuery
- drag & resize元素的jQuery實現jQuery
- 具有淡入淡出效果的下拉導航選單例項程式碼單例
- jQuery的ajax實現的刪除記錄程式碼例項jQuery
- css實現匹配具有指定屬性的元素CSS
- jQuery實現的刪除指定標籤程式碼例項jQuery