js淡入淡出效果實例代碼:現在的網頁要求美觀平滑,所以很多讓元素消失的效果也也需要有一個過渡過程,這樣看起來更為平緩美觀,本章節提供了一個代碼實例,可以輕鬆的實現讓元素淡入淡出效果。代碼實例如下:螞蟻部落 以上代碼實現了我們的要求,代碼比較簡單,直接運用的jQuery中的函...
js淡入淡出效果實例代碼:
現在的網頁要求美觀平滑,所以很多讓元素消失的效果也也需要有一個過渡過程,這樣看起來更為平緩美觀,本章節提供了一個代碼實例,可以輕鬆的實現讓元素淡入淡出效果。
代碼實例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> p { width:200px; height:200px; background-color:#60C; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script language="javascript"> $(document).ready(function(){ $("#bt").toggle(function(){ $("p").fadeTo("slow",0.5); },function(){ $("p").fadeTo("slow",0.5); }); }) </script> </head> <body> <p></p> <input type="button" value="淡入/淡出" id="bt"/> </body> </html>
以上代碼實現了我們的要求,代碼比較簡單,直接運用的jQuery中的函數,這裡不多介紹了。
相關閱讀:
1.toggle()函數可以參閱jQuery的toggle()方法一章節。
2. fadeTo()函數可以參閱jQuery的fadeTo()方法一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10594
更多內容可以參閱:http://www.softwhy.com/jquery/