Méthode jQuery.animate() : concevoir des ani­ma­tions pour un site Web

La méthode jQuery.animate() offre de nom­breuses pos­si­bi­li­tés si vous souhaitez créer des effets, et garantit un affichage har­mo­nieux sur dif­fé­rents na­vi­ga­teurs. Elle présente beaucoup d’avantages et constitue donc une ap­pli­ca­tion très populaire auprès des dé­ve­lop­peurs, qui s’en servent pour intégrer des ani­ma­tions simples ou complexes à leurs sites Web.

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

La fonction jQuery.animate() ap­par­tient à la bi­blio­thèque jQuery et vous permet de créer des ani­ma­tions sur votre site Web. Elle peut en effet influer sur les pro­prié­tés CSS d’un élément HTML, comme la position, la taille, la couleur, l’effet de trans­pa­rence, 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 pro­prié­tés CSS ; celles-ci se trans­for­ment ensuite en une animation har­mo­nieuse 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 Ma­na­ge­ment System), par exemple en im­plé­men­tant jQuery pour WordPress avec rapidité et facilité.

Vous souhaitez en savoir plus sur les concepts fon­da­men­taux de jQuery ? Nous vous con­seil­lons 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);

• pro­per­ties : il s’agit d’un objet qui renferme les pro­prié­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 mil­li­se­condes ;
• easing : il s’agit d’une fonction de tran­si­tion, qui permet de per­son­na­li­ser l’exécution de l’animation ;
• complete : il s’agit d’une fonction de rappel fa­cul­ta­tive, appelée à la fin de l’animation le cas échéant.

Quels sont les types d’ani­ma­tions dis­po­nibles ?

La méthode jQuery.animate() propose dif­fé­rentes options per­met­tant de contrôler les ani­ma­tions, notamment des séquences, des boucles et des fonctions de tran­si­tion.

Ani­ma­tions sé­quen­tielles

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

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

La con­ca­té­na­tion commence par déplacer l’élément de 250 pixels vers la gauche, puis de 100 pixels vers le bas.

Boucles d’ani­ma­tions

Il est aussi possible d’in­tro­duire 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 per­son­na­li­sée ani­ma­te­Loop() 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 tran­si­tion jQuery.animate() vous per­met­tent de per­son­na­li­ser la vitesse de vos ani­ma­tions :

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

Dans cet exemple, la fonction de tran­si­tion « ea­seOut­Bounce » permet de donner un effet de ressort à l’élément lorsque celui-ci est animé vers la droite.

Ani­ma­tions au dé­fi­le­ment

Pour dé­clen­cher 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é­fi­le­ment est associé à la fenêtre. Il est activé chaque fois que le site Web défile. En premier lieu, « $(window).scrollTop() » permet de dé­ter­mi­ner la position de dé­fi­le­ment à un instant précis. Ensuite, la position de « myElement » est dé­ter­mi­née à partir de « $(“#myElement“).offset().top ». Dans le cas d’une position de dé­fi­le­ment su­pé­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 mil­li­se­condes).