Home >Web Front-end >Front-end Q&A >How to make elements slide up and disappear in jquery
How to make elements slide up and disappear in jquery
- 青灯夜游Original
- 2022-04-27 19:28:122270browse
Method: 1. Use slideUp(), the syntax "$("element").slideUp(milliseconds)" will hide the selected element in a sliding manner; 2. Use slideToggle(), the syntax "$( "Element").slideToggle(milliseconds)", when the element is in the display state, the element will be hidden in a sliding manner.
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
jquery method to realize the element sliding up and disappearing
1. Use slideUp()
The slideUp() method hides the selected elements in a sliding manner.
Note: Hidden elements will not be fully displayed (no longer affect the layout of the page).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").slideUp(1000);
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">上滑隐藏元素</button>
</body>
</html>
2. Use slideToggle()
slideToggle() will check the visible state of the selected element. If an element is If an element is visible, the element will be hidden by sliding up; if an element is hidden, the element will be displayed by sliding down.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").slideToggle(1000);
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">滑动的隐藏/显示元素</button>
</body>
</html>
[Recommended learning: jQuery video tutorial, web front-end video】
The above is the detailed content of How to make elements slide up and disappear in jquery. For more information, please follow other related articles on the PHP Chinese website!