Masquez facilement les éléments de la page à l'aide des animations jQuery-js tutoriel-php.cn

Masquez facilement les éléments de la page à l'aide des animations jQuery

WBOY

Libérer： 2024-02-26 20:12:07

original

373 Les gens l'ont consulté

Masquez facilement les éléments de la page à laide des animations jQuery

Utilisez l'animation jQuery pour supprimer facilement des éléments de page

Dans le développement Web, nous rencontrons souvent des situations où des éléments de page doivent être ajoutés ou supprimés dynamiquement. En utilisant les riches effets d'animation fournis par jQuery, vous pouvez rendre l'ajout et la suppression d'éléments de page plus vivants et plus intéressants. Cet article expliquera comment utiliser l'animation jQuery pour supprimer facilement des éléments de page et fournira des exemples de code spécifiques.

Tout d'abord, nous devons préparer une page HTML simple et y introduire la bibliothèque jQuery. Ensuite, nous déclencherons l'effet d'animation de suppression de l'élément en cliquant sur le bouton.

L'exemple de code HTML est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Masquez facilement les éléments de la page à laide des animations jQuery</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>

Copier après la connexion

Dans le code ci-dessus, nous définissons d'abord un élément interactif .box Lorsque l'utilisateur clique sur l'élément, l'effet de fondu sortant sera déclenché et. l'élément sera supprimé. Dans le même temps, nous avons également préparé un bouton qui déclenchera le même effet lorsqu'on cliquera dessus. .box 元素，在用户点击该元素时，会触发淡出效果并且删除该元素。同时，我们还准备了一个按钮，点击按钮时也会出发同样的效果。

在JavaScript代码部分，我们使用了 fadeIn() 和 remove()

Dans la partie code JavaScript, nous utilisons les méthodes fadeIn() et remove() pour obtenir l'effet de décoloration et de suppression des éléments. Une fois l'élément disparu, l'élément est supprimé via la fonction de rappel.

Grâce à l'exemple de code ci-dessus, nous montrons comment utiliser l'animation jQuery pour supprimer facilement des éléments de page et rendre la suppression des éléments de page plus fluide et plus belle grâce à l'effet d'animation de fondu. J'espère que cet article vous sera utile dans le développement Web. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!