Créer des effets ou animations personnalisées

20 min Niveau 9

Dans ce nouveau cours, nous allons apprendre à créer des effets personnalisés ou des "animations" en utilisant la méthode jQuery animate().

Présentation de la méthode jQuery animate() et limitations

La méthode animate() nous permettra de créer des effets ou des animations sur n'importe quelle propriété CSS numérique. Nous lui passons les propriétés que nous voulons animer comme paramètres obligatoires.

Ensuite, nous pouvons également lui transmettre la durée de l'animation en millisecondes, la fonction d'accélérateur (vitesse de l’animation, swing : plus lentement au début / à la fin, mais plus rapidement au milieu par défaut ou linear : vitesse constante) et la fonction de rappel à exécuter après la fin de l'animation, il s’agit ici d’une fonction qui sera exécutée une fois que l’animation sera terminée, aussi appelée callback, en paramètres optionnels.

Tout d'abord, veuillez noter que vous ne pourrez pas utiliser l'animation à tout moment, n'importe où. Tout d'abord, vous devez savoir que la plupart des propriétés CSS non numériques ne peuvent pas être animées avec animate() en utilisant jQuery (jQuery sans extension spécifique).

Par exemple, sauf si vous utilisez l'extension jQuery.color, vous ne pouvez pas utiliser animate() pour animer les propriétés CSS liées aux couleurs.

Vous devez également connaître la notation abrégée des propriétés CSS, telles que les polices, les bordures, etc. animate() n'est pas bien prise en charge. Par conséquent, lorsque nous voulons les animer, nous aimons toujours utiliser la version complète de ces propriétés.

Exemples d’utilisation de jQuery animate()

Nous pourrons animer une ou plusieurs propriétés CSS en utilisant animate(). Commençons par animer les propriétés CSS individuelles. Par exemple, nous pouvons animer les propriétés width, height et font-size des éléments un par un.

<body>
    <h1>Titre principal</h1>
    <button id="button1">animate width</button>
    <button id="button2">animate height</button>
    <button id="button3">animate font-size</button>
</body>

$(document).ready(function(){
    $("#button1").click(function () {
        //Diminue la largeur de h1 de 20% sur 1 seconde 
        $("h1").animate({ width: "-=20%" }, 1000);
    });

    $("#button2").click(function () {
        //Fait passer la hauteurà 0 si elle n'est pas à 0 ou la rétablit
        $("h1").animate({ height: "toggle" });
    });

    $("#button3").click(function () {
        //Passe la taille de police à 20px sur 2 secondes
        $("h1").animate({ fontSize: "20px" }, 2000);
    });
});

Au lieu d'animer les propriétés CSS une à une indépendamment les unes des autres, nous pouvons également les animer en même temps en passant plusieurs propriétés en tant que paramètres à animate(). Pour cela, nous utiliserons la syntaxe suivante :

<body>
    <h1>Titre principal</h1>
    <button id="button1">animate</button>
</body>

$(document).ready(function(){
    $("h1").animate({
        //Diminue la largeur de h1 de 20% sur 1 seconde 
        //Fait passer la hauteurà 0 si elle n'est pas à 0 ou la rétablit
        //Passe la taille de police à 20px sur 2 secondes
        width: "-=20%", height: "toggle", fontSize: "20px"
    }, 1000);
});

La file d’attente ou queue des animations

Se connecter pour voir la suite

Besoin d'aide ?

Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !