hide()是jQuery中的一种内置方法, 用于隐藏所选元素。
语法如下:
$(selector).hide(duration, easing, call_function);
选择器是选定的元素。
参数:
它接受以下指定的三个参数:
- duration:它指定隐藏效果的速度。
- easing:它指定元素在动画的不同点的速度。
- call_function:这是隐藏操作后要执行的回调函数。
返回值:它不返回任何值。
jQuery代码显示hide()方法的工作方式:
代码1:
在下面的代码中, 没有参数用于传递给此方法。
< html >
< head >
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
</ script >
<!-- jQuery code to show the working of this method -->
< script >
$(document).ready(function() {
$(".b1").click(function() {
$("p").hide();
});
});
</ script >
< style >
div {
width: 50%;
height: 80px;
padding: 20px;
margin: 10px;
border: 2px solid green;
font-size: 30px;
}
.b1 {
margin: 10px;
}
</ style >
</ head >
< body >
< div >
< p >lsbin !.</ p >
</ div >
<!-- click on this button and above paragraph will disappear -->
< button class = "b1" >Click me !</ button >
</ body >
</ html >
输出如下:
在点击"点击我!"之前按钮-
点击"点击我!"后按钮-
代码2:
在下面的代码中, 参数传递给此方法。
< html >
< head >
< script
src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
</ script >
< script >
<!-- jQuery code to show the working of this method -->
$(document).ready(function() {
$(".btn1").click(function() {
$("p").hide(1000, function() {
alert("Hide() method has finished its working!");
});
});
});
</ script >
< style >
p {
width: 40%;
padding: 20px;
height: 50px;
border: 2px solid green;
}
</ style >
</ head >
< body >
< p >lsbin.!</ p >
<!-- click on this button and above paragraph will hide -->
< button class = "btn1" >Click to Hide</ button >
</ body >
</ html >
输出如下:
在点击"点击隐藏"按钮之前,
点击"点击隐藏"按钮后,