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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。