jQuery以動畫方式設定元素的透明度
本章節介紹一下如何以動畫方式設定元素的透明度。
動畫方式設定透明度元素的透明度效果比較柔軟平滑,比瞬間完成設定的效果更為人性化。
使用fadeTo()方法即可實現此效果,更多內容可以參閱jQuery fadeTo()一章節。
下面就通過程式碼例項做一下介紹。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #antzone{ width:300px; height:300px; color:red; background:#060; } </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(5000,0.5,function(){ $("#show").text("動畫效果完成"); }); }) }) </script> </head> <body> <div id="antzone"></div> <div id="show"></div> <input type="button" id="bt" value="檢視效果"/> </body> </html>
上面的程式碼可以在五秒內將元素設定為半透明效果。
相關文章
- 以動畫方式設定元素的透明度動畫
- jQuery動畫方式設定元素的透明度jQuery動畫
- svg以動畫方式設定透明度SVG動畫
- JavaScript 動畫方式設定元素尺寸和透明度JavaScript動畫
- 使用jquery設定元素的透明度jQuery
- 利用jquery設定div元素的透明度jQuery
- jQuery動畫方式設定div元素長和寬程式碼例項jQuery動畫
- jQuery元素動畫方式滑動效果jQuery動畫
- JavaScript設定元素透明度JavaScript
- jQuery設定透明度效果jQuery
- jquery設定元素css樣式的幾種方式jQueryCSS
- JavaScript漸變方式設定透明度JavaScript
- jquery實現的元素以動畫方式移動和漸變效果jQuery動畫
- opacity設定元素透明度程式碼例項
- CSS3漸變方式設定透明度CSSS3
- jQuery如何設定元素的屬性值jQuery
- jQuery動態設定div元素的尺寸jQuery
- js動態設定元素透明度程式碼例項JS
- 相容所有瀏覽器js設定元素透明度效果瀏覽器JS
- js style方式設定元素的樣式JS
- jQuery建立一個元素同時設定元素的屬性jQuery
- jquery設定和獲取元素的屬性jQuery
- javascript實現的動態設定元素透明度程式碼例項JavaScript
- javascript使用style方式設定元素的樣式JavaScript
- jQuery位移和透明度同時進行動畫效果jQuery動畫
- 教你三種jQuery框架實現元素顯示及隱藏動畫方式jQuery框架動畫
- jquery實現的點選頁面動畫方式平滑定位到某元素程式碼jQuery動畫
- js移入和離開動畫方式改變透明度JS動畫
- canvas 設定透明度Canvas
- canvas設定透明度Canvas
- jQuey設定透明度
- CSS 透明度設定CSS
- javascript緩衝彈性方式設定元素的尺寸JavaScript
- Jquery如何獲取和設定元素內容?jQuery
- jQuery使用css()方法設定元素的display屬性值jQueryCSS
- jquery動態設定元素的尺寸程式碼例項jQuery
- jQuery動態設定div元素的高度和寬度jQuery
- iOS專案開發實戰——設定檢視的透明度改變動畫iOS動畫