Méthode : 1. Utilisez slideUp(), la syntaxe "$("Element").slideUp(milliseconds)" masquera l'élément sélectionné de manière coulissante ; 2. Utilisez slideToggle(), la syntaxe "$("Element) ") .slideToggle(milliseconds)", lorsque l'élément est dans l'état affiché, l'élément sera masqué de manière coulissante.
L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.
méthode jquery pour réaliser que l'élément glisse vers le haut et disparaît
1. Utilisez la méthode slideUp()
slideUp() pour masquer l'élément sélectionné de manière coulissante.
Remarque : Les éléments masqués ne seront pas entièrement affichés (n'affectent plus la mise en page de la 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. Utiliser slideToggle()
slideToggle() vérifiera l'état visible de l'élément sélectionné, l'élément sera masqué en glissant vers le haut ; l'élément sera affiché de manière coulissante vers le bas.
<!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>【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end】
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!
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Comment supprimer des éléments dans jquery
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
Qu'est-ce qu'un élément caché dans jquery
Qu'est-ce qui est mis en évidence dans jquery
Comment vérifier l'état du port avec netstat
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
