0Pricing
jQuery Academy · Leçon

Chaînage et mise en file des animations

Découvrez comment chaîner plusieurs méthodes d’animation et gérer la file d’animations pour créer des effets visuels séquentiels et coordonnés dans des interfaces dynamiques.

Chaînage et mise en file des animations est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 3 leçons au total.

Introduction à l’enchaînement des animations

Imaginez que vous vouliez déplacer un élément, changer sa couleur, puis le faire disparaître progressivement. Effectuer ces actions manuellement, l’une après l’autre, peut être délicat !

L’enchaînement des animations dans jQuery vous permet de relier plusieurs méthodes d’animation. Chaque animation ne commence qu’une fois la précédente terminée, ce qui crée des effets fluides et séquentiels.

Syntaxe de base de l’enchaînement

Les méthodes jQuery renvoient souvent l’objet jQuery lui-même. Cela vous permet d’appeler directement une autre méthode sur le résultat et de former une « chaîne ».

Ici, une boîte se déplace vers la droite, puis vers le bas. Essayez de l’exécuter !

<!DOCTYPE html>
<html>
<head>
<title>jQuery Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Chain</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 1000) // Move right
          .animate({top: '50px'}, 800); // Move down
      });
    });
  </script>
</body>
</html>

Créer des séquences complexes

Vous pouvez enchaîner de nombreuses méthodes d’animation. jQuery place automatiquement ces animations dans une file interne, afin de garantir leur exécution dans l’ordre que vous avez défini.

Cela crée un flux séquentiel pour les éléments de votre interface. Regardez la boîte se déplacer, grandir, puis disparaître progressivement !

<!DOCTYPE html>
<html>
<head>
<title>Complex Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: green;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Sequence</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800)
          .animate({height: '100px', width: '100px'}, 600)
          .animate({opacity: 0.5}, 500)
          .animate({top: '100px'}, 700)
          .fadeOut(500); // Fades out completely
      });
    });
  </script>
</body>
</html>

Fonctionnement de la file d’animations

Lorsque vous enchaînez des méthodes d’animation, jQuery ne les exécute pas toutes en même temps. Il les ajoute plutôt à une liste spéciale appelée file d’animations, ou file « fx ».

  • La première animation démarre immédiatement.
  • Les animations suivantes attendent dans la file.
  • Lorsqu’une animation se termine, jQuery prend automatiquement la suivante dans la file et la démarre.

Vos animations s’exécutent ainsi de manière séquentielle et prévisible.

Ajouter des pauses avec .delay()

Parfois, vous avez besoin d’une pause entre les animations. La méthode .delay() est idéale pour cela ! Elle suspend l’exécution des éléments suivants de la file d’animations pendant une durée donnée.

La boîte se déplace, s’arrête, puis se déplace à nouveau.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Delay</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: purple;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Animation</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800) // Move right
          .delay(1000) // Pause for 1 second
          .animate({top: '50px'}, 800); // Move down
      });
    });
  </script>
</body>
</html>

Exécuter du code personnalisé dans la file

Vous pouvez insérer directement des fonctions qui ne sont pas des animations dans la file à l’aide de .queue(). Cela vous permet d’effectuer des actions, comme modifier du texte ou ajouter une classe, exactement entre deux animations.

La fonction est exécutée lorsque son tour arrive dans la file. N’oubliez pas d’appeler next() dans votre fonction personnalisée pour indiquer à jQuery de passer à l’élément suivant de la file !

<!DOCTYPE html>
<html>
<head>
<title>Custom Queue Function</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: orange;
    position: relative;
    left: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <p id="status">Ready</p>
  <button id="startAnimation">Start Sequence</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800)
          .queue(function(next) { // Add custom function to queue
            $(this).css("background-color", "blue");
            $("#status").text("Color changed!");
            next(); // Crucial: tells jQuery to proceed
          })
          .animate({top: '50px'}, 800)
          .queue(function(next) {
            $("#status").text("Animation done!");
            next();
          });
      });
    });
  </script>
</body>
</html>

Interrompre les animations avec .stop()

Que faire si vous souhaitez arrêter une animation en cours ? La méthode .stop() est la solution. Elle peut arrêter l’animation en cours sur un élément.

  • .stop(true) : arrête l’animation actuelle et vide toute la file d’animations.
  • .stop(false, true) : arrête l’animation actuelle et la place directement dans son état final, sans vider la file.

Utilisez-la avec précaution, car elle peut perturber vos séquences soigneusement planifiées !

<!DOCTYPE html>
<html>
<head>
<title>jQuery Stop</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: teal;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start</button>
  <button id="stopAnimation">Stop (clear queue)</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 2000)
          .animate({top: '100px'}, 2000)
          .animate({left: '0px'}, 2000);
      });

      $("#stopAnimation").on("click", function() {
        $("#myBox").stop(true, false); // Stop current, clear queue, don't jump to end
      });
    });
  </script>
</body>
</html>

Aller directement à la fin d’une animation avec .finish()

La méthode .finish() permet de terminer immédiatement toutes les animations en cours sur un élément et de vider sa file d’animations.

  • Elle revient à appeler .stop(true, true) sur toutes les animations.
  • L’élément passe instantanément à l’état final de toutes les animations en attente.

C’est utile pour les boutons de « réinitialisation » ou pour faire rapidement passer un élément à son état animé final.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Finish</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: darkblue;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Long Chain</button>
  <button id="finishAnimation">Finish All</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 3000)
          .animate({top: '100px'}, 3000)
          .animate({width: '100px'}, 3000);
      });

      $("#finishAnimation").on("click", function() {
        $("#myBox").finish(); // Instantly jump to final state
      });
    });
  </script>
</body>
</html>

Enchaîner différents effets

L’enchaînement ne concerne pas uniquement .animate() ! Vous pouvez enchaîner de nombreuses autres méthodes d’animation jQuery, comme .fadeIn(), .slideUp(), .slideToggle(), et bien d’autres.

Ces méthodes utilisent également la même file d’animations, ce qui vous permet de créer facilement des séquences visuelles complexes.

<!DOCTYPE html>
<html>
<head>
<title>Mixed Animation Chain</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 80px;
    height: 80px;
    background-color: #3498db;
    margin-bottom: 10px;
    display: none; /* Start hidden */
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Mixed Chain</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .fadeIn(500) // Fade in
          .delay(500) // Pause
          .slideUp(500) // Slide up
          .delay(500) // Pause
          .slideDown(500) // Slide down
          .animate({width: '120px', height: '120px'}, 700); // Grow
      });
    });
  </script>
</body>
</html>

Vérification rapide de l’enchaînement

Examinez le code jQuery suivant. Quel sera l’état final de #myBox après le clic sur le bouton ?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  #myBox {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    left: 0px;
    opacity: 1;
  }
</style>
</head>
<body>
  <div id="myBox"></div>
  <button id="btn">Click Me</button>
  <script>
    $(document).ready(function() {
      $("#btn").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 500)
          .delay(500)
          .animate({opacity: 0.5}, 500)
          .hide(500);
      });
    });
  </script>
</body>
</html>

Récapitulatif&nbsp;: enchaînements et files

Excellent travail ! Vous avez appris à créer des effets visuels dynamiques et séquentiels grâce au mécanisme d’enchaînement et de mise en file des animations de jQuery.

  • Enchaînement : relier plusieurs méthodes d’animation.
  • File : jQuery gère les animations dans une séquence.
  • .delay() : insérer une pause entre les animations.
  • .queue() : insérer des fonctions personnalisées dans la file.
  • .stop() : interrompre ou vider la file.
  • .finish() : terminer instantanément toutes les animations en attente.

Ensuite, nous étudierons l’assouplissement personnalisé et les fonctions de rappel d’animation pour un contrôle encore plus précis !

Questions Fréquemment Posées

La leçon « Chaînage et mise en file des animations » est-elle gratuite ?

Oui — le texte complet de « Chaînage et mise en file des animations » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Chaînage et mise en file des animations » ?

Découvrez comment chaîner plusieurs méthodes d’animation et gérer la file d’animations pour créer des effets visuels séquentiels et coordonnés dans des interfaces dynamiques. Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer jQuery Academy ?

Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 3.

Combien de temps prend la leçon « Chaînage et mise en file des animations » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?

Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Chaînage et mise en file des animations
  2. Accélération personnalisée et rappels d’animation
  3. Effets avancés d’affichage et de glissement
← Retour à jQuery Academy