Comment faire une animation en jQuery ?

de , le , 1 5 4 5776 vues

1. Il y a plusieurs manières de faire une animation en jQuery. La première consiste à utiliser les fonctions jQuery déjà disponibles :

slideUp() : Cache un élèment en réduisant sa hauteur vers le haut.
slideDown() : Affiche un élément en augmentant sa hauteur vers le bas.
fadeOut() : Cache un élément en réduisant progressivement son opacité.
fadeIn() : Affiche un élèment en augmentant progressivement son opacité.
hide() : Fait disparaître un élément en réduisant simultanément longueur, largeur et opacité.
show() : Affiche un élèment en augmentant simultanément longueur, largeur et opacité.

Ces 6 fonctions ont le même "fonctionnement", elles prennent en paramètres la vitesse["slow","fast",int] et la fonction dite callback, c'est à dire qui sera exécutée quand la fonction mère sera terminée.
$("#votreObjet").show("fast",function(){
     //script à exécuter quand l'animation est terminée.
     alert("Cool Story Bro !");
});
Ici on fait apparaître avec show l'objet #votreObjet. Il apparaîtra avec une vitesse "fast" et affichera une fois l'animation terminée la msgbox "Cool Story Bro !"

Enfin vous pouvez combiner ces différentes fonctions avec delay(). Cette fonction va vous permettre d’enchaîner ces fonctions en imposant un delai entre elles. Son utilisation est très simple :
$('#votreObjet').fadeOut(500).delay(250).fadeIn(500); 
Explication : #votreObjet va disparaître en 500ms, puis réapparaître en 500ms après avoir fait une pause de 250ms.

Consultez tous les effets disponibles : http://api.jquery.com/category/effects/

2. Pour faire une animation plus personnalisée, où l'on maitrise plus de paramètres, il faut utiliser la fonction animate().


Expliquons un exemple utilisant cette fonction :
$('#votreObjet').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // votre script une fois que l'animation est terminée.
  });
animate() va prendre les valeurs CSS en cours de votre objet #votreObjet et les faire évoluer progressivement vers les nouvelles que vous avez définies. Disons de base #votreObjet était défini dans votre CSS avec :
#votreObjet{
     position:relative;
     opacity:1;
     left:0px;
     height:200px;
}
La fonction animate() précédente va mettre l'opacité à 0.25, augmenter la position left de 50px, et enfin toggle la hauteur, tout ça en 5000ms. Le toggle consiste à faire une inversion. Si l'objet a une hauteur définie alors elle sera mise à zéro. Si vous refaite un traitement jQuery sur ce même objet avec un toggle alors la hauteur sera remise à sa valeur initiale. Les valeurs CSS dynamiques de votre objet ressembleront à ça :
#votreObjet{
     position:relative;
     opacity:0.25;
     left:50px;
     height:0px;
}
Pour aller plus loin : http://webdesignledger.com/tutorials/13-excellent-jquery-animation-techniques

Tutoriels conseillés

outils professeur date intitulé