更新時間:2021-07-19 來源:黑馬程序員 瀏覽量:
jQuery中用于控制元素顯示和隱藏效果的方法如表1所示。
表1 控制元素的顯示和隱藏
方法 | 說明 |
---|---|
show([speed,[easing],[fn]]) | 顯示隱藏的匹配元素 |
hide([speed,[easing],[fn]]) | 隱藏顯示的匹配元素 |
toggle([speed],[easing],[ fn]) | 元素顯示與隱藏切換 |
下面通過代碼演示show()、hide()和toggle()的簡單使用。
<style>
div { width: 150px; height: 300px; background-color: pink; }
</style>
<button>顯示</button>
<button>隱藏</button>
<button>切換</button>
<div></div>
<script>
$("button").eq(0).click(function() {
$("div").show(1000, function() {
alert("已顯示");
});
});
$("button").eq(1).click(function() {
$("div").hide(1000, function() {
alert("已隱藏");
});
});
$("button").eq(2).click(function() {
$("div").toggle(1000);
});
</script>
上述代碼中,第2行設(shè)置div元素的樣式寬度150px,高度300px,背景色pink。第4~6行分別定義功能按鈕,第7行定義div元素,第9~13行給頁面中的第1個按鈕綁定單擊事件,實現(xiàn)單擊“顯示”按鈕控制div元素的顯示,第14~18行給頁面中的第2個按鈕綁定單擊事件,實現(xiàn)單擊“隱藏”按鈕控制div元素的隱藏,第19~21行給頁面中的第3個按鈕綁定單擊事件,實現(xiàn)單擊“切換”按鈕控制div元素的顯示和隱藏。
在瀏覽器中運行,效果如圖1所示。
圖1 案例效果
猜你喜歡: