Retourner à la page d'accueil de TJS

Script animate : Utilisation de animate() de jQuery

Création d'animations avec animate() de jQuery
Partie III : Pour aller encore plus loin avec JavaScript / Chapitre 23 : Bibliothèques et frameworks / Page 306

Exécution du script

Emulation de la console

Code source

<html><head><title>Animation avec animate() de jQuery</title><script src="framework/jquery.min.js"></script><script src="framework/jquery.easing.js"></script></head><body><h1>Animation via jQuery.animate()</strong></h1><p>Choisissez une fonction d'animation pour lancer l'animation</p><p>Utilise le plugin jQuery Easing pour définir les fonctions d'animations (<a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">http://gsgd.co.uk/sandbox/jquery/easing/></a>)</p><form><p><select id="list" onchange="startAnimation(this.options[this.selectedIndex].value)"><option value="">Choisir une fonction</option><select></p></form><style type="text/css">body {    min-height: 600px;}div#js {  position:relative;  background: #F7DF1D;  font-family: verdana, arial;  font-weight: bold;}div#text {  position:absolute;}</style><div id="js">  <div id="text">JS</div></div><script type="text/javascript">/* Construction de la liste des fonctions easing */var easingNames=["swing","easeInQuad","easeOutQuad","easeInOutQuad","easeInCubic","easeOutCubic","easeInOutCubic","easeInQuart","easeOutQuart","easeInOutQuart","easeInQuint","easeOutQuint","easeInOutQuint","easeInSine","easeOutSine","easeInOutSine","easeInExpo","easeOutExpo","easeInOutExpo","easeInCirc","easeOutCirc","easeInOutCirc","easeInElastic","easeOutElastic","easeInOutElastic","easeInBack","easeOutBack","easeInOutBack","easeInBounce","easeOutBounce","easeInOutBounce"];  for (var i=0; i<easingNames.length; i++) {  var o=document.createElement("option");  o.value=easingNames[i];  o.text=" - "+easingNames[i];  list.appendChild(o);}/* Fonction d'initialisation avant animation */function resetAnimation() {  $("div#js").css("width",30).css("height",30)  $("div#text").css("font-size",16).css("right",5).css("bottom",5);}/* Fonction d'animation */  function startAnimation(easingName) {  resetAnimation();  $("div#js").animate(    {      width:300,      height:300,    },     {      duration: 2000,      easing: easingName,      complete: function() {        console.log("Fin d'animation de div#js");      }            }    );    $("div#text").animate(    {      fontSize:190,      bottom:-20    },     {      duration: 2000,      easing: easingName,      complete: function() {        console.log("Fin d'animation de div#text");      }      }  );}  resetAnimation();</script></body></html>

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...

Nouveau service en ligne de TJS

cleanMyJS : Détectez toutes les erreurs JavaScript de vos sitescleanMyJS.com
Détectez, enregistrez et analysez toutes les erreurs JavaScript de vos sites
Le 22/08/2019 13:54:37 sur php7 en 56.5 ms