Exemple de tutoriel sur l'animation en jquery

Animation jQuery

1. Effet de zoom dans le coin supérieur gauche

hide([speed,[fn]])

Présentation : Masquer les éléments affichés

Paramètres : vitesse : une chaîne de l'une des trois vitesses prédéterminées ("lente", "normale" ou "rapide") ou une valeur en millisecondes indiquant la durée de l'animation (telle que : 1000)

fn : dans Fonction à exécuter une fois l'animation terminée, une fois par élément.

// $(":button[value=hide]").click(function(){
// $("div").hide(2000,function(){
// alert("div est caché");
// });
// })

show([speed,[fn]])

　Aperçu : Afficher les éléments correspondants masqués.

// $(":button[value=show]").click(function(){
// $("div").show(2000,function(){
// alert("div is display");
// });
// })

toggle([speed],[fn])

　Aperçu : Si l'élément est visible, passez-le en masqué ; si l'élément est masqué, passez-le en visible.

// //toggle([speed],[fn]) Si l'élément est visible, passez en masqué ; si l'élément est masqué, passez en visible
// $(": bouton[ value=hidden]").click(function(){
// $("div").toggle(2000);
// })

2. Effet de mise à l'échelle vers le haut et vers le bas

slideUp(speed, [callback])

Présentation : masquez dynamiquement toutes les correspondances via un élément de changement de hauteur (diminution vers le haut), déclenchant éventuellement un fonction de rappel une fois le masquage terminé.

Paramètres : vitesse Une chaîne de l'une des trois vitesses prédéterminées ("lente", "normale" ou "rapide") ou une valeur en millisecondes indiquant la durée de l'animation (telle que : 1000) rappel (facultatif) dans Fonction exécutée lorsque l'animation est terminée

//slideUp(speed, [fn]) masque dynamiquement tous les éléments correspondants via des changements de hauteur (diminuants vers le haut), déclenchant éventuellement une fonction de rappel une fois le masquage terminé
/ / $(":button[value=hide]").click(function(){
// $("div").slideUp(2000);
// })

slideDown(speed, [callback])

Présentation : affichez dynamiquement tous les éléments correspondants via des changements de hauteur (augmentation vers le bas) et déclenchez éventuellement une fonction de rappel une fois l'affichage terminé.

// //slideDown(speed, [fn]) affiche dynamiquement tous les éléments correspondants via des changements de hauteur (augmentant vers le bas), et déclenche éventuellement une fonction de rappel une fois l'affichage terminé
// $(" :button[value=display]").click(function(){
// $("div").slideDown(2000);
// })

slideToggle([speed ],[fn])
Présentation : basculez la visibilité de tous les éléments correspondants via les changements de hauteur et déclenchez éventuellement une fonction de rappel une fois le changement terminé.

//slideToggle([speed],[fn]) Bascule la visibilité de tous les éléments correspondants via les changements de hauteur et déclenche éventuellement une fonction de rappel une fois le changement terminé
// $(" :button [value=hidden]").click(function(){
// $("div").slideToggle(2000);
// })

3. Effet de fondu (changement d'opacité)

fadeOut(speed, [callback])

Aperçu : Tous sont obtenus grâce à des changements d'opacité Correspond au fondu sortant de l'élément effet et déclenche éventuellement une fonction de rappel une fois l'animation terminée.

// $(":button[value=hide]").click(function(){
// $("div").fadeOut(2000);
// } )

fadeIn(speed, [callback])

Présentation : obtenez l'effet de fondu de tous les éléments correspondants grâce à des changements d'opacité et déclenchez éventuellement une fonction de rappel une fois l'animation terminée.

$(":button[value=display]").click(function(){
// $("div").fadeIn(2000);
// })

fadeToggle([speed,[fn]])

Présentation : changez les effets de fondu d'entrée et de sortie de tous les éléments correspondants en modifiant l'opacité et déclenchez éventuellement un rappel après l'animation est la fonction terminée.

$(":button[value=hidden]").click(function(){
// $("div").fadeToggle(2000);
// })

fadeTo(speed,opacity,[fn])

Présentation : Ajustez progressivement l'opacité de tous les éléments correspondants à l'opacité spécifiée et déclenchez éventuellement une fois l'animation terminée Une fonction de rappel.

// $(":button[value=hide]").click(function(){
// $("div").fadeTo(2000,0.5);
/ / })

4. Animation personnalisée

animate(params,[speed],[fn])

Présentation : Fonctions de création d'animations personnalisées.

// $("div").animate({"left":"1000px"},2000);

stop([clearQueue], [gotoEnd ])

Présentation : Arrêtez toutes les animations en cours d'exécution sur l'élément spécifié.

Paramètres : clearQueue (facultatif) Si défini sur true, la file d'attente sera effacée. L'animation peut être terminée immédiatement.

gotoEnd (facultatif) permet à l'animation en cours d'exécution de se terminer immédiatement.

// $(document).click(function(){
// $("div").stop()
// })

délai(durée)

Présentation : définissez un délai pour reporter l'exécution des éléments suivants dans la file d'attente.

　Temps de retard de durée du paramètre, unité : millisecondes

// $("div").delay(2000).animate({"left":"1000px"},2000); 🎜>

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!