Maison >interface Web >Questions et réponses frontales >Quelles sont les fonctions d'animation jquery ?
Il existe 17 fonctions d'animation jquery : 1. animate(), utilisée pour appliquer une animation personnalisée à l'élément sélectionné ; 2. hide(), utilisée pour masquer l'élément sélectionné ; 3. show(), utilisée pour afficher l'élément sélectionné ; . Sélectionnez les éléments ; 4. fadeOut(), utilisé pour masquer les éléments en définissant l'opacité ; 5. fadeTo() et ainsi de suite.
L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.
Fonctions d'animation jquery
Le tableau ci-dessous répertorie toutes les méthodes jQuery pour créer des effets d'animation.
| Méthode | Description |
|---|---|
| animate() | Appliquer une animation "personnalisée" à l'élément sélectionné |
| clearQueue() | Supprimer toutes les fonctions de file d'attente de l'élément sélectionné (toujours en cours d'exécution) |
| delay() | Définit un délai |
| dequeue() | sur toutes les fonctions en file d'attente (pas encore en cours d'exécution) de l'élément sélectionné |
| dequeue() | supprime la fonction suivante en file d'attente puis exécute la fonction |
| fadeIn() | modifie progressivement l'opacité des éléments sélectionnés, de caché à visible |
| fadeOut() | modifie progressivement l'opacité des éléments sélectionnés, de visible à caché |
| fadeTo() | Changez progressivement l'élément sélectionné en l'opacité donnée |
| fadeToggle() | Basculez entre les méthodes fadeIn() et fadeOut() |
| finish() | Arrêtez et supprimez l'élément sélectionné et terminez toutes les animations de file d'attente |
| hide() | Masquer l'élément sélectionné |
| queue() | Afficher la fonction de file d'attente de l'élément sélectionné |
| show() | Afficher l'élément sélectionné |
| slideDown() | Faites glisser et affichez l'élément sélectionné en ajustant la hauteur |
| slideToggle() | slideUp() et slideDown() en basculant entre les méthodes |
| slideUp() | Faites glisser en ajustant la hauteur Masquer le élément sélectionné |
| stop() | Arrêtez l'animation en cours d'exécution sur l'élément sélectionné |
Voici quelques fonctions d'animation couramment utilisées.
1. La méthode animate()
animate() effectue une animation personnalisée de l'ensemble de propriétés CSS.
Cette méthode fait passer un élément d'un état à un autre via les styles CSS. Les valeurs des propriétés CSS changent progressivement, vous permettant de créer des effets animés.
Seules les valeurs numériques peuvent être animées (telles que "margin:30px"). Les valeurs de chaîne ne peuvent pas être animées (telles que « background-color:red »).
Astuce : Veuillez utiliser "+=" ou "-=" pour créer des animations relatives.
Exemple : appliquer une animation à un élément en modifiant sa hauteur : la méthode
<!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() {
$("#box").animate({
height: "300px"
});
});
$("#btn2").click(function() {
$("#box").animate({
height: "100px"
});
});
});
</script>
</head>
<body>
<button id="btn1">使用动画放大高度</button>
<button id="btn2">重置高度</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
</body>
</html>
2, hide(), show() et toggle()
hide() masque l'élément sélectionné.
show() affiche l'élément sélectionné
toggle() : basculer entre les méthodes hide() et show()
Exemple : masquer ou afficher l'élément
3, méthode slideUp(), slideDown() et slideToggle()
slideUp() : masquez l'élément sélectionné de manière coulissante.
en faisant glisser
<!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").hide();
});
$(".btn2").click(function() {
$("p").show();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">隐藏</button>
<button class="btn2">显示</button>
</body>
</html>
</html>
fadeIn() modifient progressivement l'opacité de l'élément sélectionné de caché à visible (effet de fondu). La méthode
La méthode fadeTo() modifie progressivement l'opacité des éléments sélectionnés à une valeur spécifiée (effet de fondu).
<!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();
});
$(".btn2").click(function() {
$("p").slideDown();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">上滑</button>
<button class="btn2">下滑</button>
</body>
</html>
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!