• Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Animations et effets

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Dans ce chapitre, je vais vous montrer comment animer vos pages Web. Après cette lecture, vous saurez comment faire apparaître, faire disparaître et animer des objets, en utilisant et en combinant les méthodes prédéfinies dans jQuery.

Apparition et disparition

Vous avez précédemment fait connaissance avec les méthodes show() et hide(). Dans les versions élémentaires de ces deux méthodes, vous avez vu que hide() fait disparaître le ou les objets auxquels elle est appliquée, alors que show() fait apparaître le ou les objets auxquels elle est appliquée.

Ainsi l'instruction $('div').hide(); cache toutes les balises <div> du document. Seulement, cette instruction fait apparaître ou disparaître les éléments correspondants immédiatement, sans aucune animation…

Apparition/disparition avec une animation

Si vous passez une durée aux méthodes show() et hide(), l'apparition ou la disparition s'animent en agissant de concert sur la hauteur, la largeur et l'opacité du ou des objets concernés. Vous pouvez passer une valeur numérique à ces méthodes pour indiquer le temps de l'animation en millisecondes ou passer la chaîne fast pour fixer la durée de l'animation à 200 millisecondes, ou la chaîne slow pour la fixer à 600 millisecondes.

Voici un exemple d'animation basé sur l'utilisation des méthodes show() et hide(). Ici, deux boutons de commande permettent d'afficher et de dissimuler les lignes paires d'un tableau.

<button id="affiche">Faire apparaître les lignes paires</button>
<button id="cache">Faire disparaître les lignes paires</button><br />
<table border>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>d</td><td>e</td><td>f</td></tr>
  <tr><td>g</td><td>h</td><td>i</td></tr>
  <tr><td>j</td><td>k</td><td>l</td></tr>
  <tr><td>m</td><td>n</td><td>o</td></tr>
</table>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('tr:even').css('background','yellow');
    $('td').css('width','200px');
    $('td').css('text-align','center');
    $('#affiche').click(function() {
      $('tr:even').show('slow');
    } ); 
    $('#cache').click(function() {
      $('tr:even').hide(1000);
    });
  });
</script>

Essayer

Le corps du document définit les boutons #affiche et #cache ainsi qu'un tableau composé de cinq lignes et de trois colonnes. La mise en forme du tableau est effectuée en jQuery. Dans un premier temps, une couleur d'arrière-plan jaune est affectée aux lignes paires du tableau, puis la largeur de toutes les cellules du tableau est fixée à 200 pixels. Enfin, le contenu des cellules est centré.

Lorsque l'utilisateur clique sur le premier bouton, la procédure événementielle $('#affiche').click () est exécutée. Les lignes paires sont alors affichées (si elles étaient cachées) en utilisant une animation lente :

$('tr:even').show('slow');

Lorsque l'utilisateur clique sur le deuxième bouton, la procédure événementielle $('#cache').click() est exécutée. Les lignes paires sont alors cachées (si elles étaient affichées) en utilisant une animation d'une durée de 1000 millisecondes :

$('#cache').click(function() {
  $('tr:even').hide(1000);
}

Si les valeurs prédéfinies fast et slow ne vous suffisent pas, vous pouvez les redéfinir, voire même en ajouter d'autres. Vous agirez pour cela sur l'objet jQuery.fx.speeds. Par exemple, l'instruction suivante redéfinit la valeur slow et lui affecte une durée de 1500 millisecondes :

jQuery.fx.speeds.slow = 1500;

L'instruction suivante ajoute la valeur super-slow et lui affecte une durée de 3000 millisecondes :

jQuery.fx.speeds['super-slow'] = 3000;

Ces valeurs pourront être utilisées dans les méthodes show() et hide(), mais également dans les méthodes fadeIn(), fadeOut(), fadeTo(), slideDown(), slideUp(), slideToggle() et animate(), qui seront étudiées un peu plus loin dans ce chapitre.

Animation avec un modèle de progression

En précisant un deuxième paramètre dans les méthodes show() et hide(), vous pouvez choisir un modèle de progression de l'animation. Deux modèles sont disponibles dans jQuery : le modèle par défaut (swing) et le modèle de progression linéaire (linear). Voici comment les incorporer aux méthodes show() et hide() :

show('slow','linear');
hide(1000,'swing');

La deuxième instruction est équivalente à l'instruction hide(1000); puisque le modèle swing est utilisé par défaut s'il n'est pas spécifié.

Apparition/disparition en cascade

Il est possible d'utiliser une fonction de rappel dans les méthodes show() et hide(). Cette méthode est appelée lorsque l'affichage/la dissimulation est terminé. Par exemple, cette instruction affiche une boîte de dialogue lorsque la dissimulation des images est terminée :

$('img').hide('slow', function message() {
  alert('Les images sont maintenant cachées');
});

En faisant référence au premier élément lors de l'exécution de la fonction hide(), et en définissant une fonction de rappel qui fait référence aux autres éléments avec la méthode next(), il est possible de faire disparaître un à un les éléments concernés par le sélecteur. Un peu comme dans un jeu de dominos : le premier domino s'écroule, entraînant dans sa chute le deuxième domino, qui entraîne dans sa chute le troisième, et ainsi de suite. Ici, le premier élément disparaît (ou apparaît si vous utilisez la méthode show()). Lorsque l'animation est terminée, la fonction de rappel fait disparaître (ou apparaître) l'élément suivant. Ainsi de suite jusqu'au dernier élément concerné par le sélecteur.

En utilisant ce principe, voyons comment enchaîner l'apparition/la disparition des images insérées dans un document.

<button id="affiche">Faire apparaître les images</button>
<button id="cache">Faire disparaître les images</button><br />
<img src="bon.png">
<img src="mauvais.png">
<img src="question.png">

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#affiche').click(function() {
      $('img').first().show('slow', function showNextOne() {
        $(this).next('img').show('slow', showNextOne);
      });    
    });
    $('#cache').click(function() {
      $('img').first().hide('slow', function hideNextOne() {
        $(this).next('img').hide('slow', hideNextOne);
      });    
    });
  });
</script>

Essayer

Le corps du document contient deux boutons d'identifiants #affiche et #cache et trois images sans identifiant, simplement affichées l'une à la suite de l'autre. Lorsque l'utilisateur clique sur le premier bouton, la méthode événementielle click() associée est exécutée. La première image ($('img').first()) est affichée (show()). Cet affichage est lent (slow), et la fonction showNextOne() est exécutée à la fin de l'animation. À son tour, la fonction showNextOne() affiche lentement (slow) l'image suivante ($(this).next('img')). Cette fonction étant appelée lorsque l'image est entièrement affichée, l'affichage se poursuit jusqu'à la dernière image incluse dans le document.

Lorsque l'utilisateur clique sur le deuxième bouton, la méthode événementielle associée est exécutée. Cette méthode est en tout point similaire à la précédente, si ce n'est que les images disparaissent une à une en utilisant la méthode hide().

Fondu enchaîné

Les méthodes fadeIn() et fadeOut() sont complémentaires des méthodes hide() et show(). Elles agissent toutes deux progressivement sur l'opacité d'un élément. La première affiche l'élément et la deuxième fait disparaître l'élément.

Apparition/disparition

Dans leur forme la plus simple, les méthodes fadeIn() et fadeOut() ne demandent aucun paramètre. Dans ce cas, l'apparition ou la disparition se fait en 400 millisecondes :

$('sel').fadeIn();
$('sel').fadeOut();

En passant une valeur numérique à ces méthodes, vous pouvez indiquer le temps de l'animation en millisecondes. Vous pouvez aussi passer la chaîne fast pour fixer la durée de l'animation à 200 millisecondes, ou la chaîne slow pour la fixer à 600 millisecondes :

$('sel').fadeIn('fast');
$('sel').fadeOut('slow');

En ajoutant un deuxième paramètre dans les méthodes fadeIn() et fadeOut(), vous pouvez choisir un modèle de progression de l'animation. Deux modèles sont disponibles dans jQuery : le modèle par défaut (swing) et le modèle de progression linéaire (linear). Voici comment les incorporer aux méthodes show() et hide() :

$('sel').fadeIn(1200,'linear');
$('sel').fadeOut(1000,'swing');

Modification de l'opacité

Pour modifier progressivement l'opacité d'un élément sans aller jusqu'à sa disparition ou sa complète opacité, vous utiliserez la méthode fadeTo(), dont voici la syntaxe :

$('sel').fadeTo(durée, opacité);

… où :

  • sel est un sélecteur jQuery ;

  • durée est la durée de l'animation. Indiquez un entier qui représente une durée en millisecondes ou une chaîne (fast, normal ou slow pour fixer la durée à 200, 400 ou 600 millisecondes) ;

  • opacité est un nombre décimal compris entre 0 (transparent) et 1 (opaque).

Si nécessaire, vous pouvez définir une fonction de rappel, qui sera appelée à la fin de l'animation :

$('sel').fadeTo(durée, opacité, function() {
  // Une ou plusieurs instructions
});

À titre d'exemple, vous utiliserez l'instruction suivante pour faire passer l'opacité d'un élément d'identifiant #semiT de sa valeur actuelle à 0,4 :

$('#semiT').fadeTo(3000, 0.4);

Un diaporama en deux instructions

Je vous propose de mettre tout ça en pratique afin de réaliser un diaporama basique. Nous allons empiler plusieurs images en les faisant disparaître grâce à la méthode fadeOut(). Voici le code :

<style type="text/css">
  img { position: absolute; left: 0px; top: 0px; }
  #img1 {z-index: 1;}
  #img2 {z-index: 2;}
  #img3 {z-index: 3;}
  #img4 {z-index: 4;}
  #img5 {z-index: 5;}
</style>

<img src="zozor5.jpg" id="img5">
<img src="zozor4.jpg" id="img4">
<img src="zozor3.jpg" id="img3">
<img src="zozor2.jpg" id="img2">
<img src="zozor1.jpg" id="img1">

<script src="jquery.js"></script>
<script>
  $(function() {
    $('img').first().fadeOut(2000, function suivante() {
        $(this).next('img').fadeOut(2000,suivante);
    });
  });
</script>

Le corps du document se contente d'afficher cinq images d'identifiants #img5 à #img1. Quelques instructions CSS suffisent pour que les images s'empilent les unes sur les autres. Pour cela, les images sont positionnées au même emplacement et un z-index différent est affecté à chacune d'entre elles pour provoquer l'empilement (plus la propriété z-index est élevée, plus l'image se trouve en avant-plan ; ici, l'image #img5 sera donc au premier plan).

Dès l'ouverture de la page, le code jQuery commence à afficher le diaporama. La première image disparaît en 2 secondes en utilisant la méthode fadeOut(), puis la fonction suivante() est appelée :

$('img').first().fadeOut(2000, function suivante() {

Cette fonction accède à l'image suivante ($(this).next('img')), lui applique un fadeOut() réglé sur 2 secondes, puis appelle la fonction suivante() :

$(this).next('img').fadeOut(2000,suivante);

Vous l'aurez compris : la fonction suivante() est appelée jusqu'à la dernière image, provoquant ainsi un fondu enchaîné sur toutes les images empilées.

Une fois les cinq images dissimulées, plus rien ne se passe. Est-il possible de boucler sur la première image pour faire un diaporama sans fin ?

Effectivement, lorsque toutes les images ont été dissimulées avec la méthode fadeOut(), la fenêtre reste désespérément vide. J'espère que vous ne m'en voudrez pas trop mais… je vous montrerai comment réaliser des diaporamas un peu plus loin dans ce cours. Pour l'instant, il est encore trop tôt et j'espère que vous pourrez vous contenter de cette ébauche de diaporama. :)

Aller plus loin

Déplier/replier des éléments

Arrivés à ce point dans la lecture de ce chapitre, vous savez faire apparaître et disparaître des éléments en utilisant les méthodes show(), fadeIn(), hide() et fadeOut(). Je vous propose de découvrir comment déplier et replier des éléments en modifiant simultanément leur hauteur et leur largeur. Pour cela, vous utiliserez les méthodes slideDown(), slideUp() et slideToggle() :

  • slideDown() augmente la hauteur et la largeur de la sélection jusqu'à atteindre la dimension « native » de chaque élément ;

  • slideUp() diminue la hauteur et la largeur de la sélection jusqu'à ce qu'elle disparaisse ;

  • slideToggle() inverse l'animation : si les objets sélectionnés ont une taille nulle, leur hauteur et leur largeur sont augmentées jusqu'à ce qu'ils atteignent leur dimension. Par contre, s'ils ont une taille non nulle, leur hauteur et leur largeur sont diminuées jusqu'à ce qu'ils disparaissent.

Tout comme les autres méthodes d'animation étudiées jusqu'ici, il est possible de passer zéro, un ou plusieurs paramètres à ces méthodes. Voici quelques exemples qui vous aideront à mieux comprendre comment réagissent ces méthodes en fonction des paramètres qui leur sont passés.

Désactiver les animations

De nombreux sites Web utilisent couramment les animations dont nous venons de parler. Si, vous aussi, vous en faites usage dans vos pages, je vous conseille d'insérer un lien permettant de les désactiver.

Mais pourquoi désactiver les animations que nous avons mis du temps à développer ?

La plupart de vos visiteurs apprécieront vos animations, mais il faut aussi penser à ceux et celles qu'elles pourraient déranger ! D'autant plus que cette opération est élémentaire en jQuery : pour désactiver toutes les animations, il vous suffit d'affecter la valeur true à l'objet jQuery.fx.off :

jQuery.fx.off = true;

Et si, par la suite, vous voulez réactiver les animations, vous affecterez la valeur false à ce même objet. L'activation et la désactivation des animations pourraient être déclenchées suite au clic sur un lien hypertexte que vous placerez dans vos pages. Le plus simple consiste à créer deux classes :

$('.stopAnim').click(function() {
  jQuery.fx.off = true;
});
$('.execAnim').click(function() {
  jQuery.fx.off = false;
});

C'est tout bête mais ça fonctionne très bien !

Définir un délai avant une animation

Il est parfois nécessaire de définir un délai avant d'exécuter une animation. Pour cela, le plus simple consiste à utiliser la méthode jQuery delay(), en précisant le délai souhaité en millisecondes. Par exemple, supposons que vous vouliez afficher un message avec la méthode fadeIn(), le laisser affiché pendant deux secondes pour qu'il ait le temps d'être lu, puis l'effacer avec la méthode fadeOut(). Vous pourriez utiliser quelque chose comme ceci :

<style>
  #message { display: none; background-color: yellow; }
</style>

<span id="message">Ce texte sera affiché pendant deux secondes</span><br /><br />
<button id="afficheMessage">Afficher le message</button>

<script src="jquery.js"></script>
<script>
 $(function() {
   $('#afficheMessage').click(function() {
     $('#message').fadeIn('slow').delay(2000).fadeOut('slow');
   });
 });
</script>

Le corps du document affiche une balise <span> dans laquelle se trouve le message, et un bouton pour déclencher l'affichage du message. Pour éviter que le message ne soit affiché à l'ouverture de la page, une instruction CSS affecte la valeur none à la propriété display de la balise <span>. Lorsque le bouton est cliqué par l'utilisateur, le texte contenu dans la balise <span> s'affiche progressivement (fadeIn('slow')), reste affiché pendant 2 secondes (delay(2000)), puis disparaît progressivement (fadeOut('slow')).

Définir une animation personnalisée

Les méthodes passées en revue jusqu'ici étaient basées sur des effets préprogrammés dans la bibliothèque jQuery. Dans cette section, je vais vous montrer comment créer des animations personnalisées en agissant sur une ou plusieurs propriétés CSS via la méthode animate(). Cette méthode admet deux syntaxes.

Première syntaxe

Cette syntaxe est la plus fréquemment utilisée. Elle permet de faire évoluer plusieurs propriétés de concert. Il est possible de choisir la durée de l'animation, le modèle de progression de l'animation et, si cela est nécessaire, d'exécuter une fonction lorsque l'animation est terminée :

$('sel').animate({ prop1: val1, prop2: val2, prop3: val3, etc. }, durée, modèle, function() {
  //Une ou plusieurs instructions
});

… où :

  • sel est un sélecteur jQuery.

  • prop1, prop2 et prop3 sont des propriétés CSS et val1, val2 et val3 les valeurs associées. Une valeur numérique sera interprétée comme un nombre de pixels. Une valeur du type « +=50 » demandera d'ajouter progressivement 50 pixels à la propriété. Inversement, la valeur « -=50 » demandera de soustraire progressivement 50 pixels à la propriété. Vous pouvez également utiliser les chaînes show, hide et toggle pour respectivement afficher, dissimuler et inverser la propriété.

  • durée est la durée de l'animation (entier en millisecondes ou chaîne fast, normal ou slow).

  • modèle est le modèle de progression de l'animation (swing, linear ou un modèle issu d'un plugin).

  • function() contient une ou plusieurs instructions qui seront exécutées lorsque l'animation sera terminée.

Les données spécifiées dans le premier argument de la méthode animate() peuvent être :

  • Des valeurs littérales : « 0.25 », « 50 », « 'yellow' » ;

  • Des valeurs relatives : « +=100 » pour augmenter de 100 pixels ou « -=30 » pour diminuer de 30 pixels ;

  • Des pourcentages : « 15% » ;

  • Des modèles de progression : swing, linear ou d'autres modèles accessibles via des plugins ;

  • Le mot clé toggle pour inverser l'animation.

Deuxième syntaxe

Dans cette syntaxe, le deuxième argument de la méthode animate() est un objet qui peut contenir une ou plusieurs options identifiées par des mots-clés. Elle est utilisée dans des cas particuliers, comme par exemple l'exécution d'une fonction à chaque étape de l'animation, la gestion des files d'attente d'animations ou encore l'utilisation de plusieurs modèles de progression pour faire évoluer les différentes propriétés CSS :

$('sel').animate({ prop1: val1, prop2: val2, prop3: val3, etc. }, {options});

… où :

  • sel est un sélecteur jQuery ;

  • prop1, prop2 et prop3 sont des propriétés CSS et val1, val2 et val3 les valeurs associées ;

  • options est un objet qui peut contenir une ou plusieurs des propriétés suivantes :

    • duration : durée de l'animation (entier en millisecondes ou chaîne fast, normal ou slow) ;

    • easing : modèle de progression de l'animation (swing, linear ou un modèle issu d'un plugin) ;

    • complete : fonction appelée lorsque l'animation est terminée ;

    • step : fonction appelée à chaque étape de l'animation ;

    • queue : valeur booléenne qui indique si l'animation doit (true) ou ne doit pas (false) être placée dans une file d'attente réservée aux animations. Si la valeur false est attribuée à cette propriété, l'animation démarre immédiatement. Dans le cas contraire, elle est en attente de déclenchement.

    • specialEasing : un ou plusieurs couples propriétés CSS/modèle de progression.

  • Lorsque les méthodes show(), hide(), fadeIn(), fadeOut(), fadeTo(), slideDown(), slideUp() et slideToggle() sont utilisées sans argument, leur durée d'exécution est par défaut égale à 400 millisecondes. Si vous le souhaitez, il est possible de choisir une autre durée. Vous pouvez utiliser la chaîne fast pour fixer la durée à 200 millisecondes ou la chaîne slow pour fixer la durée à 600 millisecondes. Mais vous pouvez également passer un nombre entier qui représente une durée en millisecondes.

  • Deux modèles de progression sont disponibles pour vos animations : linear et swing. Si vous voulez utiliser d'autres modèles de progression, vous devrez utiliser un ou plusieurs plugins.

  • Les méthodes fadeIn(), fadeOut() et fadeTo() permettent d'agir sur l'opacité des éléments sélectionnés. La première fait apparaître la sélection en augmentant l'opacité jusqu'à 1.La deuxième fait disparaître la sélection en diminuant l'opacité jusqu'à 0. La troisième augmente ou diminue l'opacité jusqu'à ce qu'elle atteigne la valeur spécifiée.

  • Pour replier des éléments vers le haut ou vers le bas, vous pouvez utiliser les méthodes slideDown(), slideUp() et slideToggle(). Un niveau minimum en anglais vous laisse supposer que la première méthode déplie la sélection vers le bas et la deuxième replie la sélection vers le haut. Quant à la troisième, elle agit comme slideDown() ou comme slideUp() en fonction de l'état (déplié ou replié) de la sélection.

  • L'objet jQuery.fx.off permet d'activer et de désactiver les animations. Affectez-lui la valeur true pour désactiver toutes les animations et la valeur false pour autoriser les animations.

  • La méthode delay() permet de différer l'exécution d'une animation. Vous pouvez l'insérer dans un chaînage d'animations.

  • Il est possible de définir des animations en faisant évoluer progressivement une ou plusieurs propriétés CSS via la méthode animate(). Ces animations sont dites personnalisées.

Exemple de certificat de réussite
Exemple de certificat de réussite