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.
Les étapes :
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
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
