• Medium

Free online content available in this course.

Paperback available in this course

course.header.alt.is_certifying

You can get support and mentoring from a private teacher via videoconference on this course.

Got it!

Last updated on 5/18/20

Animations et effets

Log in or subscribe for free to enjoy all this course has to offer!

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éthodesshow()ethide(). Dans les versions élémentaires de ces deux méthodes, vous avez vu quehide()fait disparaître le ou les objets auxquels elle est appliquée, alors queshow()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éthodesshow()ethide(), 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înefastpour fixer la durée de l'animation à 200 millisecondes, ou la chaîneslowpour la fixer à 600 millisecondes.

Voici un exemple d'animation basé sur l'utilisation des méthodesshow()ethide(). 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#afficheet#cacheainsi 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éfiniesfastetslowne vous suffisent pas, vous pouvez les redéfinir, voire même en ajouter d'autres. Vous agirez pour cela sur l'objetjQuery.fx.speeds. Par exemple, l'instruction suivante redéfinit la valeurslowet lui affecte une durée de 1500 millisecondes :

jQuery.fx.speeds.slow = 1500;

L'instruction suivante ajoute la valeursuper-slowet lui affecte une durée de 3000 millisecondes :

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

Ces valeurs pourront être utilisées dans les méthodesshow()ethide(), mais également dans les méthodesfadeIn(),fadeOut(),fadeTo(),slideDown(),slideUp(),slideToggle()etanimate(), 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éthodesshow()ethide(), 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éthodesshow()ethide():

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

La deuxième instruction est équivalente à l'instructionhide(1000);puisque le modèleswingest 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éthodesshow()ethide(). 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 fonctionhide(), et en définissant une fonction de rappel qui fait référence aux autres éléments avec la méthodenext(), 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éthodeshow()). 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#afficheet#cacheet 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énementielleclick()associée est exécutée. La première image ($('img').first()) est affichée (show()). Cet affichage est lent (slow), et la fonctionshowNextOne()est exécutée à la fin de l'animation. À son tour, la fonctionshowNextOne()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éthodehide().

Fondu enchaîné

Les méthodesfadeIn()etfadeOut()sont complémentaires des méthodeshide()etshow(). 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éthodesfadeIn()etfadeOut()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înefastpour fixer la durée de l'animation à 200 millisecondes, ou la chaîneslowpour la fixer à 600 millisecondes :

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

En ajoutant un deuxième paramètre dans les méthodesfadeIn()etfadeOut(), 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 fadeIn() etfadeOut():

$('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éthodefadeTo(), dont voici la syntaxe :

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

… où :

  • selest un sélecteur jQuery ;

  • duréeest la durée de l'animation. Indiquez un entier qui représente une durée en millisecondes ou une chaîne (fast,normalouslowpour 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#semiTde 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éthodefadeOut(). 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 unz-indexdifférent est affecté à chacune d'entre elles pour provoquer l'empilement (plus la propriétéz-indexest élevée, plus l'image se trouve en avant-plan ; ici, l'image#img5sera 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éthodefadeOut(), puis la fonctionsuivante()est appelée :

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

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

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

Vous l'aurez compris : la fonctionsuivante()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éthodefadeOut(), 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éthodesshow(),fadeIn(),hide()etfadeOut(). 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éthodesslideDown(),slideUp()etslideToggle():

  • 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. La documentation vous fournira tous les éléments pour 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 valeurtrueà l'objetjQuery.fx.off:

jQuery.fx.off = true;

Et si, par la suite, vous voulez réactiver les animations, vous affecterez la valeurfalseà 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 jQuerydelay(), en précisant le délai souhaité en millisecondes. Par exemple, supposons que vous vouliez afficher un message avec la méthodefadeIn(), le laisser affiché pendant deux secondes pour qu'il ait le temps d'être lu, puis l'effacer avec la méthodefadeOut(). 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 valeurnoneà la propriétédisplayde 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éthodeanimate(). 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ù :

  • selest un sélecteur jQuery.

  • prop1,prop2etprop3sont des propriétés CSS etval1,val2etval3les 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înesshow,hideettogglepour respectivement afficher, dissimuler et inverser la propriété.

  • duréeest la durée de l'animation (entier en millisecondes ou chaînefast,normalouslow).

  • modèleest le modèle de progression de l'animation (swing,linearou 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éthodeanimate()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,linearou d'autres modèles accessibles via des plugins ;

  • Le mot clétogglepour inverser l'animation.

Deuxième syntaxe

Dans cette syntaxe, le deuxième argument de la méthodeanimate()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ù :

  • selest un sélecteur jQuery ;

  • prop1,prop2etprop3sont des propriétés CSS etval1,val2etval3les valeurs associées ;

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

    • duration: durée de l'animation (entier en millisecondes ou chaînefast,normalouslow) ;

    • easing: modèle de progression de l'animation (swing,linearou 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 valeurfalseest 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éthodesshow(),hide(),fadeIn(),fadeOut(),fadeTo(),slideDown(),slideUp()etslideToggle()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înefastpour fixer la durée à 200 millisecondes ou la chaîneslowpour 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 :linearetswing. Si vous voulez utiliser d'autres modèles de progression, vous devrez utiliser un ou plusieurs plugins.

  • Les méthodesfadeIn(),fadeOut()etfadeTo()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éthodesslideDown(),slideUp()etslideToggle(). 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 commeslideDown()ou commeslideUp()en fonction de l'état (déplié ou replié) de la sélection.

  • L'objetjQuery.fx.offpermet d'activer et de désactiver les animations. Affectez-lui la valeurtruepour désactiver toutes les animations et la valeurfalsepour autoriser les animations.

  • La méthodedelay()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éthodeanimate(). Ces animations sont dites personnalisées.

Example of certificate of achievement
Example of certificate of achievement