Chapitre 7 – Effets et animations

jQuery fournit des méthodes simples pour créer des transitions visuelles sans écrire d’animations CSS complexes. Dans ce chapitre, tu vas apprendre à afficher / masquer, utiliser les effets fade et slide, comprendre leurs limites, et savoir quand préférer le CSS.

1) show() / hide() / toggle()

Ces méthodes modifient l’affichage de base d’un élément.

$('#box').show();
$('#box').hide();
$('#box').toggle();

Avec durée (en millisecondes) :

$('#box').toggle(400);

En réalité, jQuery joue sur la propriété display.

2) fadeIn() / fadeOut() / fadeToggle()

Les effets fade agissent sur l’opacité.

$('#alert').fadeIn();
$('#alert').fadeOut(300);
$('#alert').fadeToggle(400);

fadeTo() : contrôler l’opacité

$('#alert').fadeTo(400, 0.5);

3) slideDown() / slideUp() / slideToggle()

Les effets slide agissent sur la hauteur.

$('#panel').slideDown();
$('#panel').slideUp();
$('#panel').slideToggle(300);

Attention aux éléments avec height fixe en CSS : les effets slide peuvent se comporter bizarrement.

4) animate() : animations personnalisées

animate() permet de modifier progressivement certaines propriétés numériques.

$('#box').animate({
  width: '300px',
  opacity: 0.5
}, 400);

animate() est limité (pas de couleurs, pas de transform). Pour les animations modernes, CSS est souvent préférable.

5) Callback : savoir quand l’animation est terminée

$('#box').fadeOut(300, function () {
  console.log('Animation terminée');
});

6) Chaînage (chaining)

Les méthodes jQuery retournent l’objet courant, ce qui permet le chaînage.

$('#box')
  .slideUp(200)
  .slideDown(200)
  .fadeTo(200, 0.5);

7) Bonnes pratiques (UX & performance)

Utiliser les animations avec parcimonie.
Préférer le CSS pour les animations complexes.
Éviter les animations longues et répétitives.
Toujours tester sur mobile.

Exercice – Menu déroulant simple

Objectif : créer un menu qui s’ouvre et se ferme avec un effet slide.

Correction

<button id="toggle">Menu</button>
<ul id="menu">
  <li>Accueil</li>
  <li>Produits</li>
  <li>Contact</li>
</ul>

<style>
  #menu { display:none; }
</style>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $(function(){
    $('#toggle').on('click', function(){
      $('#menu').slideToggle(300);
    });
  });
</script>

Résumé du chapitre

show/hide/toggle : afficher / masquer.
fade* : jouer sur l’opacité.
slide* : jouer sur la hauteur.
animate() : animations simples.
CSS reste préférable pour les animations complexes.