Répéter une animation sans fin

Difficulté Facile
Note
Thématiques
Mis à jour le vendredi 6 décembre 2013

Toutes les animations jQuery présentées jusqu'ici s'exécutaient suite à des actions de l'utilisateur et s'arrêtaient après leur exécution. Que diriez-vous d'exécuter une animation en boucle ?

Le principe repose sur la définition d'une fonction JavaScript dans laquelle on insère un ou plusieurs appels à la méthode animate(). Le dernier de ces appels utilise une fonction de rappel qui exécute… cette même fonction JavaScript !

Pour illustrer mes propos, nous allons déplacer indéfiniment une balise <div> sur un carré de 200 pixels de côté. Voici le code utilisé :

<style type="text/css">
  #balle {
    width: 10px;
    height: 10px;
    background-color: red;
    border: black 2px solid;
    border-radius: 10px;
    position: relative;
  }
</style>

<div id="balle"></div>

<script src="jquery.js"></script>
<script>
  $(function() {
    function bis() {
      $('#balle').animate({left: '+=200'}, 'slow')
                 .animate({top: '+=200'}, 'slow')
                 .animate({left: '-=200'}, 'slow')
                 .animate({top: '-=200'}, 'slow', bis);
    };
    bis();
  });
</script>

Essayer

Le corps du document contient une simple balise <div> d'identifiant #balle. Cette balise est mise en forme par quelques instructions CSS. Sont ainsi définies les dimensions, la couleur d'arrière-plan, la bordure et le type de positionnement.

La fonction bis() décrit un cycle d'animation de la balise <div>. Elle est tout d'abord déplacée vers la droite de 200 pixels en 200 millisecondes, puis vers le bas de 200 pixels en 200 millisecondes, puis vers la gauche de 200 pixels en 200 millisecondes et enfin vers le haut de 200 pixels, toujours en 200 millisecondes :

$('#balle').animate({left: '+=200'}, 'slow')
           .animate({top: '+=200'}, 'slow')
           .animate({left: '-=200'}, 'slow')
           .animate({top: '-=200'}, 'slow', bis);
};

Remarquez le dernier paramètre de la méthode animate(). En utilisant la fonction de rappel bis(), un nouveau cycle d'animation est lancé.

L'auteur