当我们使用jQuery时，我们可以使用其提供的一些效果方法来实现有趣的动画效果。其中show()方法用于将隐藏元素显示出来。下面是show()方法的完整攻略。
方法语法
show()方法有四个可选参数：speed、easing、callback和filter。其中，speed表示动画的速度，可以设置为字符型的slow（600毫秒）、fast（200毫秒）或者具体的毫秒数，如：1000毫秒。easing表示动画的缓动函数，默认是swing，也可以设置为linear。callback是一个可选的回调函数，表示当动画执行完毕后要执行的函数。filter是一个可选的过滤器，用于选择要显示的元素。
show()方法的基本语法如下：
$(selector).show(speed, easing, callback);
方法示例
下面我们将给出两个示例，来演示show()方法的使用。
示例一
这个示例中，我们将创建一个按钮，当用户点击按钮时，文本框会从隐藏状态出现出来，显示出来。
<!DOCTYPE html>
<html>
<head>
<title>Show Effect Example</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btnShow").click(function(){
$("#txtName").show();
});
});
</script>
</head>
<body>
<input type="button" id="btnShow" value="Show"/>
<input type="text" id="txtName" style="display:none"/>
</body>
</html>
这个示例中，我们使用了jQuery的ready（）方法，当页面加载完毕后，即可执行我们的代码。当用户点击“Show”按钮时，文本框将会从隐藏状态出现出来，显示出来。
示例二
这个示例中，我们将创建一组图片，当用户鼠标移到图片上时，图片将会从隐藏状态显示出来。
<!DOCTYPE html>
<html>
<head>
<title>Show Effect Example 2</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$(".imgContainer img").hover(function(){
$(this).next().show();
}, function(){
$(this).next().hide();
});
});
</script>
<style>
.imgContainer img{
width: 250px;
height: 150px;
}
.imgContainer .caption{
display: none;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
color: white;
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 150px;
padding: 60px 0 0 0;
}
</style>
</head>
<body>
<div class="imgContainer">
<img src="./images/image1.jpg"/>
<div class="caption">Image 1</div>
</div>
<div class="imgContainer">
<img src="./images/image2.jpg"/>
<div class="caption">Image 2</div>
</div>
<div class="imgContainer">
<img src="./images/image3.jpg"/>
<div class="caption">Image 3</div>
</div>
</body>
</html>
这个示例中，我们使用了jQuery的hover()方法，当用户鼠标移到图片上时，图片的下方会显示一段简短的说明文字。当鼠标移开时，说明文字会隐藏。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery Effect show()方法 - Python技术站
微信扫一扫 
支付宝扫一扫 