La méthode animate() de jQuery


La méthode animate() de jQuery

  1. Objectifs

    • Connaitre les méthodes animate()
    • Etre capable d’animer des modifications apportées aux propriétés CSS
  2. Présentation

    • jQuery met à notre disposition une méthode puissante, .animate(), pour créer nos propres animations personnalisées.
    • la méthode animate() va fonctionner avec toutes les propriétés CSS de type numérique, c’est-à-dire celles dont les valeurs peuvent être numériques (comme les propriétés CSS width et heigh)
    • Cette méthode existe en deux variantes:
      1. La première prend quatre arguments: propriétés et valeurs de style, une vitesse facultative, Un type d’easing facultatif et Une fonction de rappel facultative
      2. La seconde variante prend deux arguments : propriétés et options :

      Pour le moment, nous utiliserons la première variante de la méthode animate(), mais nous passerons à la seconde dans autre tutoriel.




  3. Syntaxe générale

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

      .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
          • Paramètre obligatoire
          • Spécifie une ou plusieurs propriétés CSS et de valeurs vers lesquelles l’animation se dirigera.
          • Les noms de propriétés doivent être sous forme camel-cased lorsqu’ils sont utilisés avec la méthode animate().
          • Exemple:écrire paddingLeft au lieu de padding-left
          • Propriétés peuvent ê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.
          • Pour les chaines 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. function
          • Optionnel
          • Une fonction à appeler une fois l’animation terminée, appelée une fois par élément correspondant.
  4. Exemple

    • L’exemple suivant crée deux boutons pour agrandir et rétrécir un division
    • Cliquez sur l’un des boutons
    • Animation
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js?ver=1.3.2"></script>
      <script type = "text/javascript" language = "javascript">
               $(document).ready(function() {alert("fffff");
                  $("#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: "100",
                        height: "20px",
                        opacity: 1.0,
                        marginLeft: "0in",
                        fontSize: "100%", 
                        borderWidth: "1px"
                     }, 2000 );
                  });		
               });
            </script>
      <style>
      .div {background-color:rgb(170, 204, 199); width:100px; border:1px solid rgb(5, 16, 175);}
      </style>
  5. Applications

    1. Animation simple
      1. É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 de bloc div pendant l’animation
        • Un nouveau clik sur le bouton augmente la largeur et la hauteur de div de 50%
        • Un click sur le bloc div faire tourner le bloc à droite de 180deg
        • Le schémas ci-dessous présente le résultat souhaité
        • La méthode animate() de jQuery

        • Créez les fichiers html, css et Js pour réaliser cette animation
      2. Solution
        • Essayez de faire l’exercice de votre côté avant de regarder la Solution !
    2. Exécuter plusieurs animations simultanément
      1. É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 est 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.
        • Uu clic sur le div, le faire tourner à gauche de 90deg
      2. Solution
        • Essayez de faire l’exercice de votre côté avant de regarder la Solution !
    3. Application:03
      1. É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
      2. Solution
        • Essayez de faire l’exercice de votre côté avant de regarder la Solution !



Abonnez vous à notre chaîne YouTube gratuitement