jQuery slideUp()方法
slideUp()是jQuery中的一个内置方法,用于隐藏所选元素。
语法:
$(selector).slideUp(speed);
参数:它接受一个可选的参数 “速度”,指定效果的持续时间的速度。
jQuery的例子显示slideUp()方法的工作:
例子1:在下面的代码中,没有向这个方法传递任何参数。
<!DOCTYPE html>
<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 () {
(".btn1").click(function () {
$("p").slideUp();
});
});
</script>
<style>
div {
width: 300px;
height: 100px;
padding: 20px;
border: 2px solid green;
}
</style>
</head>
<body>
<div>
<p>This paragraph will get hide.</p>
<!-- click on this button -->
<button class="btn1">Slide up</button>
</div>
</body>
</html>
输出:
例子2:在下面的代码中,超速参数被传递给这个方法。
<!DOCTYPE html>
<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 () {
(".btn1").click(function () {
$("p").slideUp(3000);
});
});
</script>
<style>
div {
width: 300px;
height: 100px;
padding: 20px;
border: 2px solid green;
}
</style>
</head>
<body>
<div>
<p>This paragraph will get hide.</p>
<!-- click on this button -->
<button class="btn1">Slide up</button>
</div>
</body>
</html>
输出: