Programmation Web Avancée

Blogue

Les cours

Animer un élément avec jQuery


Rédigé par , le
La librairie JavaScript jQuery offre plusieurs fonctions pour faire des animations ou des modifications sur une page Web.
 
Voici l'une de mes fonctions préférés : animate()
 
Cette fonction permet de chercher un ou plusieurs éléments HTML pour les animer selon des paramètres définis.
 
Exemple :
<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Animer une image</title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <meta charset="utf-8" />
  </head>
  <body>
    <div style="height:160px;">
      <img id="image" src="/images/theme-city/buildings.png" 
            width="150px" alt="image avec effet" onclick="animer()" />
    </div>

    <script>
      function animer() {
        $("#image").animate({
          width   : "0px",
          opacity : 0
        }, 1000, apresAnimer);
      }
			
      function apresAnimer() {
        $("#image").css("width", "150px");
        $("#image").animate({
          opacity : 1
          }, 5000);
      }
    </script>
  </body>
</html>

Voici mon exemple, cliquez sur cette image et observez. 

image avec effet

 Les étapes :
1- Téléchargez jQuery et insérez le lien vers le fichier JS dans la section <head> de votre page. 
2- Créer le ou les éléments HTML à animer
3- Appeler la fonction animate au moment voulu
 
Détails sur animate
$()                       // est la fonction principale de jQuery.

$("#image")               // demande à jquery de chercher l'élément 
                          // dont l'id est "image". 

$("#image").animate({     // en 1000msec (1 seconde), faire disparaitre mon 
	width   : "0px",  // image et mettre sa largeur à 0px.
	opacity : 0
}, 1000);             


La fonction animate permet l'animation de plusieurs paramètres CSS : font-size, left, top, width, ...

Génial, non ?

Ajouter votre commentaire
(facultatif)
(facultatif et non divulgé)
Captcha image
Prenez le nombre affiché et faites moins 1.
 
Blog  

Les articles


Pour envoyer une demande d'assistance à l'enseignant, cliquez ici