Méthode jQuery.animate() : concevoir des animations pour un site Web

La méthode jQuery.animate() offre de nombreuses possibilités si vous souhaitez créer des effets, et garantit un affichage harmonieux sur différents navigateurs. Elle présente beaucoup d’avantages et constitue donc une application très populaire auprès des développeurs, qui s’en servent pour intégrer des animations simples ou complexes à leurs sites Web.

Méthode jQuery.animate() : de quoi s’agit-il ?

La fonction jQuery.animate() appartient à la bibliothèque jQuery et vous permet de créer des animations sur votre site Web. Elle peut en effet influer sur les propriétés CSS d’un élément HTML, comme la position, la taille, la couleur, l’effet de transparence, etc. Elle s’avère également très efficace lorsqu’elle est associée à d’autres méthodes jQuery, notamment jQuery.find() ou encore jQuery.on(). En utilisant la méthode jQuery.css(), vous pouvez aussi définir l’état initial des propriétés CSS ; celles-ci se transforment ensuite en une animation harmonieuse pour certaines valeurs cibles. De la même manière, il est très simple d’utiliser la méthode jQuery.animate() pour créer des effets CSS dans votre système de gestion de contenu (ou CMS, pour Content Management System), par exemple en implémentant jQuery pour WordPress avec rapidité et facilité.

Vous souhaitez en savoir plus sur les concepts fondamentaux de jQuery ? Nous vous conseillons de vous référer à notre article faisant office de tutoriel jQuery.

À quoi ressemble la syntaxe de la méthode jQuery.animate() ?

La structure de la méthode jQuery.animate() ressemble à ce qui suit :

$(selector).animate({properties}, duration, easing, complete);

• properties : il s’agit d’un objet qui renferme les propriétés CSS et les formats cibles utilisés pour l’animation ;
• duration : il s’agit de la durée de l’animation, indiquée en millisecondes ;
• easing : il s’agit d’une fonction de transition, qui permet de personnaliser l’exécution de l’animation ;
• complete : il s’agit d’une fonction de rappel facultative, appelée à la fin de l’animation le cas échéant.

Quels sont les types d’animations disponibles ?

La méthode jQuery.animate() propose différentes options permettant de contrôler les animations, notamment des séquences, des boucles et des fonctions de transition.

Animations séquentielles

Vous pouvez exécuter plusieurs animations l’une après l’autre en utilisant plusieurs fois de suite la méthode .animate() :

$("#myElement").animate({left: '250px'}).animate({top: '100px'});

La concaténation commence par déplacer l’élément de 250 pixels vers la gauche, puis de 100 pixels vers le bas.

Boucles d’animations

Il est aussi possible d’introduire des effets de boucle en utilisant une fonction de rappel, de manière à appeler à nouveau l’animation :

function animateLoop() {
    $("#myElement").animate({left: '250px'}, 1000, function() {
        $("#myElement").animate({left: '0px'}, 1000, animateLoop);
    });
}
animateLoop();

La fonction personnalisée animateLoop() permet alors de déplacer l’élément de 250 pixels vers la droite, puis de le ramener à sa position initiale.

Fonctions « easing »

Les fonctions de transition jQuery.animate() vous permettent de personnaliser la vitesse de vos animations :

$("#myElement").animate({left: '250px'}, 1000, 'easeOutBounce');

Dans cet exemple, la fonction de transition « easeOutBounce » permet de donner un effet de ressort à l’élément lorsque celui-ci est animé vers la droite.

Animations au défilement

Pour déclencher une animation lorsque votre site Web défile, n’hésitez pas à utiliser l’évènement jQuery.animate() dit « on scroll » :

$(window).scroll(function() {
    var scrollPos = $(window).scrollTop();
    var elementPos = $("#myElement").offset().top;
    if (scrollPos > elementPos - 300) {
        $("#myElement").animate({
            backgroundColor: "#ff0000"
            left: "0"
        }, 1000);
    }
});

Dans cet exemple, l’évènement de défilement est associé à la fenêtre. Il est activé chaque fois que le site Web défile. En premier lieu, « $(window).scrollTop() » permet de déterminer la position de défilement à un instant précis. Ensuite, la position de « myElement » est déterminée à partir de « $(“#myElement“).offset().top ». Dans le cas d’une position de défilement supérieure de 300 pixels à la position de l’élément concerné, la méthode jQuery.animate() est appelée. La couleur du fond se règle alors sur « #ff0000 » (rouge), et la position de gauche sur « 0 ». L’animation dure 1 seconde (soit 1 000 millisecondes).