La méthode animate() de jQuery

Syntaxe générale

• $(sélecteur).animate(propriétés [, duration] [, easing] [, complete])
• $(sélecteur).animate({style} [, vitesse] [, accélération] [, fonctionRetour])

$(sélecteur).animate({
    propriété1: 'valeur1', 
    propriété2: 'valeur2'
}, vitesse, easing, function() {
    alert("L’animation est terminée.");
});

• La fonction prend quatre arguments :

  1. Style (propriétés)

     • Paramètre obligatoire.
     • Spécifie une ou plusieurs propriétés CSS et les valeurs vers lesquelles l'animation se dirigera.
     • Les noms de propriétés doivent être sous forme camel-case lorsqu'ils sont utilisés avec la méthode animate().
     • Exemple : écrire paddingLeft au lieu de padding-left
     • Propriétés pouvant être animées :
       • backgroundPositionX, backgroundPositionY, borderWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderSpacing, margin, marginBottom, marginLeft, marginRight, marginTop, opacity, outlineWidth, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, height, width, maxHeight, maxWidth, minHeight, minWidth, fontSize, bottom, left, right, top, letterSpacing, wordSpacing, lineHeight, textIndent.

  2. Vitesse (par défaut : 400)

     • Optionnel.
     • Une chaîne ou un nombre déterminant la durée d'exécution de l'animation en millisecondes.
     • Les chaines prédéfinies sont slow (600ms), normal (400ms) et fast (200ms).

  3. Easing ou accélération (par défaut : swing)

     • Optionnel.
     • Une chaîne indiquant quelle fonction d'accélération utiliser pour la transition.
     • Spécifie la vitesse de l'élément à différents points de l'animation.
     • Est un mot-clé spécifiant si la vitesse de l'animation doit être cohérente (linear) ou commencer lentement et accélérer (swing). S'il est omis, la valeur par défaut est swing.

  4. Fonction (complete)

     • Optionnel.
     • Une fonction à appeler une fois l'animation terminée, appelée une fois par élément correspondant.

Exemple

• L'exemple suivant crée deux boutons pour agrandir et rétrécir une division.
• Cliquez sur l'un des boutons pour tester :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("#out").click(function(){
        $("#block").animate({ 
            width: "80%",
            height: "60px",
            opacity: 0.8,
            marginLeft: "0.2in",
            fontSize: "3em", 
            borderWidth: "10px"
        }, 2000);
    });	
    
    $("#in").click(function(){
        $("#block").animate({ 
            width: "100px",
            height: "20px",
            opacity: 1.0,
            marginLeft: "0in",
            fontSize: "100%", 
            borderWidth: "1px"
        }, 2000);
    });		
});
</script>

<style>
#block {
    background-color: rgb(170, 204, 199);
    width: 100px;
    border: 1px solid rgb(5, 16, 175);
}
</style>

Applications

1. Animation simple

   • Énoncé

     • Dans un document HTML, créez un bloc div et l'animer à l'aide de la méthode animate() de jQuery.
     • Définissez les propriétés css du bloc div à l'intérieur de la méthode animate().
     • Sous le bloc div, créez un bouton.
     • Appelez la méthode animate() à l'intérieur de l'événement click du bouton.
     • Changez la position du bloc div pendant l'animation.
     • Un nouveau clic sur le bouton augmente la largeur et la hauteur du div de 50%.
     • Un clic sur le bloc div fait tourner le bloc à droite de 180deg.
     • Le schéma ci-dessous présente le résultat souhaité :

     

     • Créez les fichiers HTML, CSS et JS pour réaliser cette animation.

   • Solution

     • Essayez de faire l'exercice de votre côté avant de regarder la Solution !

2. Exécuter plusieurs animations simultanément

   • Énoncé

     • Définissez un document HTML5 comportant un bouton et un élément div, comme vous avez fait pour la première application. Stylez l’élément div pour lui donner les caractéristiques suivantes :
       • position absolue à 35 pixels du bord supérieur et à 10 pixels du bord gauche
       • taille 100px X 100px
       • couleur d’arrière-plan bleu
       • bordure continue noire épaisse de 3px
       • opacité de 0,65
       • border-radius de 6px
     • Au clic sur le bouton, déplacez l’élément div vers la droite en 350px, puis vers le bas en 350px, puis vers la gauche en 10px puis vers le haut en 35px.
     • Au clic sur le div, le faire tourner à gauche de 90deg.

   • Solution

     • Essayez de faire l'exercice de votre côté avant de regarder la Solution !

3. Application 03

   • Énoncé

     • Définissez un document HTML5 comportant deux boutons et un élément div.
     • Définissez le code jQuery pour que :
       • Le premier bouton positionne l’élément #boite à 200 pixels du bord gauche et 120 pixels du bord supérieur.
       • Le deuxième bouton redimensionne l’élément #boite à 150×30 pixels.

   • Solution

     • Essayez de faire l'exercice de votre côté avant de regarder la Solution !