Home >Web Front-end >JS Tutorial >Easily hide page elements using jQuery animations
Easily hide page elements using jQuery animations
- WBOYOriginal
- 2024-02-26 20:12:07396browse
Use jQuery animation to easily remove page elements
In web development, we often encounter situations where page elements need to be added or deleted dynamically. Using the rich animation effects provided by jQuery, you can make the addition and deletion of page elements more vivid and interesting. This article will explain how to use jQuery animation to easily remove page elements, and provide specific code examples.
First, we need to prepare a simple HTML page and introduce the jQuery library into it. Next, we will trigger the animation effect of deleting the element by clicking the button.
HTML code example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Easily hide page elements using jQuery animations</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.box {
width: 200px;
height: 200px;
background-color: skyblue;
margin: 20px;
text-align: center;
line-height: 200px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">点击我删除</div>
<button id="deleteBtn">删除元素</button>
<script>
$(document).ready(function() {
$(".box").click(function() {
$(this).fadeOut(1000, function() {
$(this).remove();
});
});
$("#deleteBtn").click(function() {
$(".box").fadeOut(1000, function() {
$(this).remove();
});
});
});
</script>
</body>
</html>In the above code, we first define an interactive .box element. When the user clicks on the element, The fade-out effect is triggered and the element is deleted. At the same time, we have also prepared a button, which will trigger the same effect when clicked.
In the JavaScript code part, we use the fadeIn() and remove() methods to achieve the effect of element fading and deletion. After the element fades out, the element is deleted through the callback function.
Through the above sample code, we show how to use jQuery animation to easily remove page elements, and make the deletion of page elements smoother and more beautiful through the fade-out animation effect. I hope this article will be helpful to you in web development.
The above is the detailed content of Easily hide page elements using jQuery animations. For more information, please follow other related articles on the PHP Chinese website!