Maison > Article > interface Web > 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!