jQuery中的show()方法用於顯示隱藏和選定的元素。
注意:此方法顯示使用CSS display:none屬性的隱藏元素。可見性被隱藏的元素不可見。
用法:
$(selector).show( speed, easing, callback )
參數:此方法接受上述和以下所述的三個參數:
- Speed:它是一個可選參數,用於指定衰落效果的速度。速度的默認值為400毫秒。可能的速度值為:
- 毫秒
- “slow”
- “fast”
- Easing:它是一個可選參數,用於指定元素到動畫不同點的速度。緩動的默認值為“swing”。放鬆的可能價值是:
- “swing”
- “linear”
- callback:它是可選參數。在show()方法完成後,將執行回調函數。
以下示例說明了jQuery中的show()方法:
範例1:此示例顯示display:none沒有給定速度的內容。
<!DOCTYPE html>
<html>
<head>
<title>
jQuery Effect show() Method
</title>
<style>
#Outer {
border:1px solid black;
padding-top:40px;
height:140px;
background:green;
display:none;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<div id= "Outer">
<h1 style = "color:white;" >
GeeksForGeeks
</h1>
</div><br>
<button id = "btn">
Show
</button>
<!-- Script to show display:none content -->
<script>
$(document).ready(function() {
$("#btn").click(function() {
$("#Outer").show(1000);
});
});
</script>
</body>
</html>
輸出:
- 在單擊按鈕之前:
- 單擊按鈕後:
範例2:此示例顯示display:none內容,沒有擺動緩動值。
<!DOCTYPE html>
<html>
<head>
<title>
jQuery Effect show() Method
</title>
<style>
#Outer {
border:1px solid black;
padding-top:40px;
height:140px;
background:green;
display:none;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<div id= "Outer">
<h1 style = "color:white;" >
GeeksForGeeks
</h1>
</div><br>
<button id = "btn">
Show
</button>
<!-- Script to show display:none content
with swing easing -->
<script>
$(document).ready(function() {
$("#btn").click(function() {
$("#Outer").show("swing");
});
});
</script>
</body>
</html>
輸出:
- 在單擊按鈕之前:
- 單擊按鈕後:
相關用法
注:本文由純淨天空篩選整理自PranchalKatiyar大神的英文原創作品 jQuery | Effect show() Method。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。