<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>
Edition 1 | Chapitre 23 : Bibliothèques et frameworks / Page 306
Edition 2 | Chapitre 24 : Bibliothèques et frameworks / Page 334
Edition 3 | Chapitre 24 : Bibliothèques et frameworks / Page 334
En savoir plus
