jQuery 效果 – 淡入淡出
在jQuery中可以透過四個方法來實現元素的淡入淡出,這四個方法分別是:fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo(),本文透過例項來為你講解如何在jQuery中使用這四個方法。
jQuery Fading 方法
透過 jQuery,您可以實現元素的淡入淡出效果。
jQuery 擁有下面四種 fade 方法:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery fadeIn() 方法
jQuery fadeIn() 用於淡入已隱藏的元素。
語法:
$(selector).fadeIn(speed,callback);
可選的 speed 引數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。.
可選的 callback 引數是 fading 完成後所執行的函式名稱。
下面的例子演示了帶有不同引數的 fadeIn() 方法:
$("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); });
jQuery fadeOut() 方法
jQuery fadeOut() 方法用於淡出可見元素。
語法:
$(selector).fadeOut(speed,callback);
可選的 speed 引數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。
可選的 callback 引數是 fading 完成後所執行的函式名稱。
下面的例子演示了帶有不同引數的 fadeOut() 方法:
$("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); });
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
如果元素已淡出,則 fadeToggle() 會向元素新增淡入效果。
如果元素已淡入,則 fadeToggle() 會向元素新增淡出效果。
語法:
$(selector).fadeToggle(speed,callback);
可選的 speed 引數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。
可選的 callback 引數是 fading 完成後所執行的函式名稱。
下面的例子演示了帶有不同引數的 fadeToggle() 方法:
$("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); });
jQuery fadeTo() 方法
jQuery fadeTo() 方法允許漸變為給定的不透明度(值介於 0 與 1 之間)。
語法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 引數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 引數將淡入淡出效果設定為給定的不透明度(值介於 0 與 1 之間)。
可選的 callback 引數是該函式完成後所執行的函式名稱。
下面的例子演示了帶有不同引數的 fadeTo() 方法:
$("button").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7); });
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70018483/viewspace-2907094/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- jQuery 04 效果 淡入淡出jQuery
- jquery中淡入淡出效果案例jQuery
- jQuery 實現淡入淡出效果jQuery
- jQuery 淡入淡出效果下拉導航選單jQuery
- jQuery實現的元素淡入淡出動畫效果jQuery動畫
- JavaScript淡入淡出效果JavaScript
- 實現元素的淡入淡出效果
- javascript淡入淡出效果程式碼例項JavaScript
- js淡入淡出效果例項程式碼JS
- jquery淡入淡出無延遲程式碼jQuery
- 淡入淡出效果簡單程式碼例項
- div的淡入淡出效果程式碼例項
- jQuery 效果jQuery
- js圖片淡入淡出效果程式碼例項JS
- win10淡入淡出效果怎麼關 win10怎麼取消視窗淡入淡出Win10
- javascript實現的淡入淡出效果程式碼例項JavaScript
- 利用API函式實現影像淡入淡出效果 (轉)API函式
- jQuery 效果方法jQuery
- jQuery 效果 – 動畫jQuery動畫
- javascript原生封裝一個淡入淡出效果的函式JavaScript封裝函式
- 滑鼠滑過實現淡入淡出效果程式碼例項
- ExtJS簡單的動畫效果(extjs淡入淡出特效)JS動畫特效
- jQuery 效果 – 停止動畫jQuery動畫
- jQuery 效果 – 滑動jQuery
- jQuery基礎 效果jQuery
- jQuery效果-animate()方法jQuery
- CSS3滑鼠懸浮和移開div淡入淡出效果CSSS3
- jQuery動畫效果的刪除行效果jQuery動畫
- 具有淡入淡出效果的下拉導航選單例項程式碼單例
- jQuery簡單tab效果jQuery
- Jquery3D效果jQuery3D
- jQuery 放大鏡效果詳解jQuery
- jQuery彈幕效果詳解jQuery
- jQuery打字機效果程式碼jQuery
- jQuery實現輪播效果jQuery
- jQuery div拖拽效果詳解jQuery
- jQuery水滴彈性摘取效果jQuery
- jQuery抖動效果詳解jQuery