Médiaforma

jQuery – Exécuter plusieurs animations simultanément

Print Friendly

La méthode animate() permet d’exécuter plusieurs animations simultanément :

animate({ propiété1: valeur1, propriété2: valeur2, propriété3: valeur3, ... }, durée, modèle, function() {
  //Une ou plusieurs instructions exécutées à la fin de l'animation
});
La durée, le modèle et la fonction callback sont facultatifs. S'ils ne sont pas précisés, l'animation dure 400 millisecondes, utilise le modèle swing et aucune instruction n'est exécutée lorsque l'animation est terminée.

 

Exercice

Définissez un document HTML5 comportant un bouton et un élément div. 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 rouge
  • bordure continue noire épaisse de 3px

Au clic sur le bouton, déplacez l’élément div vers la droite en 150px, puis vers le bas en 150px, puis vers la gauche en 10px puis vers le haut en 35px.

 

 

Solution :

Voici le code utilisé :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Animation animate()</title>
    <style>
      #carre {
        position: absolute;
        top: 35px;
        left: 10px;
        background-color: red;
        width: 100px;
        height: 100px;
        border-style: solid;
        border-width: 3px;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <button id="animer">Lancer l'animation</button><br/>
    <div id="carre"></div>
    <script>
      $(function() {
        $('#animer').on('click', function(){
          $('#carre').animate({left:'150px'})
                     .animate({top:'150px'})
                     .animate({left:'10px'})
                     .animate({top:'35px'});
        });
      });
    </script>
  </body>
</html>
Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply