萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!

從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!

一.摘要

名稱 說明 舉例 show( )

顯示隱藏的匹配元素。

這個就是 'show( speed, [callback] )' 無動畫的版本。如果選擇的元素是可見的,這個方法將不會改變任何東西。無論這個元素是通過hide()方法隱藏的還是在CSS裡設置了display:none;,這個方法都將有效。

顯示所有段落:
$("p").show()
show( speed, [callback])

以優雅的動畫顯示所有匹配的元素,並在顯示完成後可選地觸發一個回調函數。

可以根據指定的速度動態地改變每個匹配元素的高度、寬度和不透明度。在jQuery 1.3中,padding和margin也會有動畫,效果更流暢。

用緩慢的動畫將隱藏的段落顯示出來,歷時600毫秒:
$("p").show(600); hide( )

隱藏顯示的元素

這個就是 'hide( speed, [callback] )' 的無動畫版。如果選擇的元素是隱藏的,這個方法將不會改變任何東西。

隱藏所有段落:
$("p").hide()
hide( speed, [callback] )

以優雅的動畫隱藏所有匹配的元素,並在顯示完成後可選地觸發一個回調函數。

可以根據指定的速度動態地改變每個匹配元素的高度、寬度和不透明度。在jQuery 1.3中,padding和margin也會有動畫,效果更流暢。

用600毫秒的時間將段落緩慢的隱藏:
$("p").hide("slow"); toggle( )

切換元素的可見狀態。

如果元素是可見的,切換為隱藏的;如果元素是隱藏的,切換為可見的。

切換所有段落的可見狀態:
$("p").toggle() toggle( switch )

根據switch參數切換元素的可見狀態(ture為可見,false為隱藏)。

如果switch設為true,則調用show()方法來顯示匹配的元素,如果switch設為false則調用hide()來隱藏元素。

切換所有段落的可見狀態:
var flip = 0;
$("button").click(function () {
   $("p").toggle( flip++ % 2 == 0 );
});
toggle( speed, [callback] )

以優雅的動畫切換所有匹配的元素,並在顯示完成後可選地觸發一個回調函數。

可以根據指定的速度動態地改變每個匹配元素的高度、寬度和不透明度。在jQuery 1.3中,padding和margin也會有動畫,效果更流暢。

用200毫秒將段落迅速切換顯示狀態,之後彈出一個對話框:
$("p").toggle("fast",
						
copyright © 萬盛學電腦網 all rights reserved