最新的Web開發教程
 

jQuery效果 - 隱藏和顯示


隱藏,顯示,切換,滑動,淡入淡出,和動畫。 哇!

點擊顯示/隱藏面板

因為時間非常寶貴,我們提供快速,方便的學習。

在w3ii,你可以學習你需要學習的一切,在方便和得心應手的格式。


例子

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

jQuery的hide()
另一個hide()演示。 如何隱藏部分文本。


jQuery的hide()show()

使用jQuery,你可以隱藏和顯示與HTML元素hide()show()方法:

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

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

句法:

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

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

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

可選的回調參數是之後要執行的函數hide()show()方法完成(你將了解更多關於回調函數在後面的章節)。

下面的示例演示與速度參數hide()

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

jQuery的toggle()

使用jQuery,您可以切換hide()show()的方法toggle()方法。

顯示元素是隱藏的,隱藏的元素顯示:

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

句法:

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

可選的速度參數可以採取以下值: "slow", "fast" ,或毫秒。

可選的回調參數是後要執行的功能toggle()完成。


自測練習用!

練習1» 練習2» 練習3» 練習4»


jQuery效果參考

對於所有的jQuery效果的完整概述,請訪問我們的jQuery效果參考