Mercredi le 23 septembre 2009 à 23:08
Enchainer plusieurs animations avec jQuery
Bonjour à tous!
Savez vous qu’avec jQuery il est possible d’enchainer plusieurs animations à la fois dans une seule instruction? alors la réponse est OUI, on peut même aller plus loin avec un peu d’imagination et c’est vraiment très facile à mettre en œuvre! En fait chaque méthode dans jQuery retourne l’objet lui-même, ainsi on peut enchaîner à une autre méthode :
Exemple :
<script type="text/javascript">// <![CDATA[
jQuery(window).ready(function(){
$('#testcode1').click(function(){
$('#mondiv').animate({width:'200px', fontSize: "18px", borderWidth:'3px', marginLeft:'100px', opacity:'0.8', padding:'10px'},2000)
.animate({width:'120px', marginLeft:'0', fontSize: "12px", borderWidth:0, opacity:'1', padding:'0'},2000);
return false;
});
});
// ]]></script>
<a id="testcode1">Tester le code</a>
<div id="mondiv" style="border: 1px solid #ffffff; background: #077f2e none repeat scroll 0% 0%; width: 120px; height: 120px;">Un div de test</div>
Resultat
Tester le code
La fonction animate() est une fonction native en jQuery, elle permet d’animer les propriétés CSS d’un objet jQuery dans une durée bien déterminée , la syntaxe comme dans l’exemple si-dessus est très simple!
On peut animer une seule, ou plusieurs propriétés CSS à la fois! Par exemple pour animer la largeur d’un div ayant l’id test et la mettre à 300px sur 2secondes le code sera :
$('#test').animate({width':'300px'},2000);
Ainsi on peut enchainer autant qu’on veux, le reste dépend de votre imagination ^^, à noter que la durée de l’animation (2000) est en millisecondes, d’où 1 seconde = 1000 ms
Un autre Exemple d’enchainement d’animation
Dans cette exemple, on va animer un div ayant un arrière plan rouge, et une image d’étoile pour construire le drapeau du maroc à la fin de l’animation
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!-- www.mcherifi.org -->
jQuery(window).ready(function(){
$('#animationlink').click(function(){
$('#mondiv').animate({left:'400px', opacity:'0.3', width:'40px', height:'70px', borderWidth:'20px'}, 1500)
.animate({top:'300px', opacity:'0.8', left:'100px', width:'70px', height:'70px', borderWidth:'7px'}, 1500)
.animate({top:'160px', opacity:'0.4', left:'500px', width:'170px', borderWidth:'3px'}, 1200)
.animate({top:0, opacity:'0.2', left:0, width:'200px', height:'200px', borderWidth:'1px'}, 700)
.animate({opacity:'1', borderWidth:'2px'}, 1000);
$('#monetoile').css('opacity', 0).animate({left:'500px', top:'400px', opacity:'0.5', height:'80px', width:'100px'}, 1300)
.animate({left:'260px', top:'250px', opacity:'0.8'}, 1000)
.animate({left:'100px', width:'0', opacity:'0.2'}, 1200)
.animate({width:'154px', top:'100px', left:'150px', opacity:'0.5'}, 1000)
.animate({left:'30px', height:'135px', width:'154px', top:'30px', opacity:'1'}, 1200);
return false;
});
});
</script>
<title>Mohammed CHERIFI - Enchainement d'une animation sous jQUery</title>
<style type="text/css">
#contenaire{
position:relative;
margin:10px;
}
#mondiv{
background:#f00;
width:150px;
height:150px;
border:1px solid #077F2E;
position:absolute;
}
#monetoile{
position:absolute;
display:none;
}
</style>
</head>
<body>
<a href="#" id="animationlink">Animaer</a><br />
<div id="contenaire">
<div id="mondiv"></div>
<img id="monetoile" src="star.gif" alt="I Love Morocco" width="154" height="135"/>
</div>
</body>
</html>
Télécharger le code source de l’amination
- Categorie: Tutoriaux
- (6) Commentaires
pynsso
septembre 24th, 2009 at 0 h 27 min
très bon article, et moi qui croyais que jQuery est complexe :D
UpDeL
septembre 26th, 2009 at 3 h 04 min
:/ je viens de découvrir un nouveau handicape dans mootools, avec Jquery c’est si simple d’enchainer une animation en variant la duration aussi.
Avec mootools il faudra redéclarer la class Morph à chaque nouvel enchainement.
Jquery est très bien pensé
Mohammed CHERIFI
septembre 27th, 2009 at 16 h 32 min
@UpDel, il est possible d’enchainer des animations avec mootools grace à la methode chain()!
(cf http://demos111.mootools.net/Chain )
Voici un exemple :
<script type= »text/javascript »>
window.addEvent(‘domready’,function(){
var myEffect = new Fx.Morph(‘testdiv’, {duration: 5000, transition: Fx.Transitions.Sine.easeOut});
myEffect.start({
‘height’: 100,
‘width’: 300,
‘background-color’: ‘#f00′,
‘border-color’:'#111′,
‘border-width’ : ‘4px’
}).chain(function(){
myEffect.start({
‘height’: 300,
‘width’: 500,
‘background-color’: ‘#0f0′,
‘border-color’:'#f00′,
‘border-width’ : ‘2px’
});
});
});
</script>
<div id= »testdiv » style= »border:1px solid red;width:900px;height:10px;background:fff;background:#999″></div>
la différence principale c’est que dans mootools on manipule directement l’élément DOM en question, et pour enchainer on est obligé de passer par chain() d’où la syntaxe deviens plus ennuyante au contraire de jQuery on manipule un objet jQuery ainsi on peu enchainer directement
UpDeL
septembre 27th, 2009 at 18 h 21 min
Mon problème consiste a varié la « duration » d’une animation, CHAIN() ne supporte pas cette option.
Le délai d’attente est autre chose !
Mohammed CHERIFI
septembre 28th, 2009 at 9 h 03 min
Oui en fait pour Fx.Morph il faut agir sur la durée en modifiant l’option duration de l’objet MyEffect, la solution donc est d’utiliser la méthode setOptions après chain():
myEffect.start({‘height’:100,width:200}).chain(function(){
myEffect.setOptions({duration:500});
myEffect.start({‘height’:300,’width’: 100});
});
voilà
rhavet
novembre 2nd, 2009 at 16 h 53 min
Salut,
C’est ce que l’on appelle la « chainabilité » sous jQuery puisque chaque methode jQuery retourne un objet jQuery…
Très utile pour les optimisations de code.
On peut donc enchainer toutes les methodes souhaitées sur un sélecteur jQuery ;)
Exemple : $(monObejtDom).addClass( »).removeClass() …etc.
;)