Home > Article > Web Front-end > Easily hide page elements using jQuery animations

Easily hide page elements using jQuery animations

WBOYOriginal: 2024-02-26 20:12:07325browse

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!

JavaScript jquery html 回调函数

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use jQuery to implement automatic numbering of dynamic table rowsNext article：Use jQuery to implement automatic numbering of dynamic table rows

See more

Easily hide page elements using jQuery animations

Related articles