Latest web development tutorials

jQuery 效果– 隱藏和顯示

隱藏、顯示、切換,滑動,淡入淡出,以及動畫,哇哦!

點擊顯示/隱藏面板

因為時間是寶貴的,我們提供快捷方便的學習方法。

在本教程,你可以學習需要的知識。


實例

jQuery hide()
簡單的jQuery hide()方法演示。

jQuery hide()
另一個hide()實例。 演示如何隱藏文本。


jQuery hide() 和show()

通過jQuery,您可以使用hide() 和show() 方法來隱藏和顯示HTML 元素:

實例

$("#hide").click(function(){
$("p").hide();
});

$("#show").click(function(){
$("p").show();
});

嘗試一下»

語法:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可選的speed 參數規定隱藏/顯示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可選的callback 參數是隱藏或顯示完成後所執行的函數名稱。

下面的例子演示了帶有speed 參數的hide() 方法:

實例

$("button").click(function(){
$("p").hide(1000);
});

嘗試一下»


jQuery toggle()

通過jQuery,您可以使用toggle() 方法來切換hide() 和show() 方法。

顯示被隱藏的元素,並隱藏已顯示的元素:

實例

$("button").click(function(){
$("p").toggle();
});

嘗試一下»

語法:

$(selector).toggle(speed,callback);

可選的speed 參數規定隱藏/顯示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可選的callback 參數是toggle() 方法完成後所執行的函數名稱。