Mohammed CHERIFI » animate http://www.mcherifi.org Another Web Developper Blog! Tue, 31 Jan 2012 18:42:15 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Enchainer plusieurs animations avec jQuery http://www.mcherifi.org/tutoriaux/enchainer-plusieurs-animations-avec-jquery.html http://www.mcherifi.org/tutoriaux/enchainer-plusieurs-animations-avec-jquery.html#comments Wed, 23 Sep 2009 23:08:07 +0000 Mohammed CHERIFI http://www.mcherifi.org/?p=176 Tweet

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

Un div de test

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

Voir le resultat

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

Partager cet article: Twitter Facebook Google Bookmarks del.icio.us Netvibes viadeo FR Digg LinkedIn Slashdot Sphinn Mixx Blogplay Identi.ca Print Ping.fm email Posterous Reddit Yahoo! Buzz PDF RSS Diigo Fark Blogosphere News blogtercimlap

]]> http://www.mcherifi.org/tutoriaux/enchainer-plusieurs-animations-avec-jquery.html/feed 6