jQuery效果--隱藏和顯示


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() 方法完成后所執行的函數名稱。

代碼:

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button type="button">切換</button>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
</body>
</html>

另一種方式:

我設置同一個按扭給它設置兩個點擊事件,一個是點擊隱藏,還有一個是雙擊顯示一秒延遲,當然你也可以用一個方法,看個人喜好,我這里這么寫只是為了測試代碼,因為可能使用的外部JQuery的文件不一樣,所以這里請您自行引入

code:

<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function() {
//點擊會隱藏
$("p").hide();
});

$("#btn1").dblclick(function(){
//在隱藏完成后雙擊顯示,一秒延遲
$("p").show(1000);
})
});
</script>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button" id="btn1">BTN1</button>

</body>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM