Voici venir le chapitre le plus fun de ce cours : les animations.

jQuery propose par défaut une série de fonctions d'animation et de transition qui permettent d'animer des éléments du DOM.

Les effets

Les effets (effects) sont des animations prédéfinies, on en a déjà utilisé un dans les chapitres précédents : fadeOut, qui permet de faire disparaitre un élément avec un fondu.

Il existe différents effets que je vous invite à tester :

jQuery(document).ready(function($){
	// SHOW/HIDE
	$('#exemple-show span').hide();
	$('#exemple-show a').click(function(e){
		$('#exemple-show span').show();
	});
	
	$('#exemple-hide a').click(function(e){
		$('#exemple-hide span').hide();
	});
	
	// FADE
	$('#exemple-fadetoggle a').click(function(e){
		$('#exemple-fadetoggle span').fadeToggle();
	});
});

<div id="exemple-show">
	<a href="#">show</a>
	<span>Du texte qui apparaît brutalement</span>
</div>

<div id="exemple-hide">
	<a href="#">hide</a>
	<span>Du texte qui disparaît brutalement</span>
</div>

<div id="exemple-fadetoggle">
	<a href="#">fadeToggle</a>
	<span>Du texte qui apparaît/disparaît en fondu à chaque clic</span>
</div>

Animations personnalisées

Les effets que vous avez vus ci-dessus sont simples et pratiques, mais on peut encore faire mieux avec jQuery et la fonction animate().

Cette fonction prend en paramètre un ensemble de propriétés CSS, et elle va se charger de faire une animation linéaire pour chacune de ces propriétés, entre leur état actuel, et l'état défini dans ses paramètres.

Petit exemple : j'ai une div carré situé en haut à gauche de la page :

<input type="button" id="handle" value="Lancer l'animation !" />
<div id="carre"></div>

Ici j'y ajoute une animation avec les propriétés CSS left et top. JQuery va se charger d'animer chacun de ces paramètres au cours du temps, de sorte que le carré se déplace vers le bas et vers la droite.

jQuery(document).ready(function($){
	$('#handle').click(function(e){
		$('#carre').animate({
			left: '50px',
			top: '80px'
		});
	});
});

Avec plusieurs étapes

Une fois que vous avez compris le procédé, c'est toujours la même chose. Ci-dessous, j'ai ajouté quelques animations :

• Un boulet bleu est tiré par le carré à la fin de l'animation (première partie).
• Ensuite, ce boulet se déplace vers le haut au survol de la souris, puis revient à sa position initiale quand vous sortez le pointeur de la souris.

<div id="carre">
	<div id="ball"></div>
</div>

jQuery(document).ready(function($){
	$('#handle').click(function(e){
		$('#carre').animate({
			left: '50px',
			top: '80px'
		}, 600, function(){
			$('#ball').animate({
				opacity:'1',
				left: '400px'
			}, 300, 'swing');  // #1 : Easing
		});
	});
	
	$('#ball').mouseover(function(e){
		$(this).animate({
			top: '-=50px'   // #2 : Valeur relative
		});
	});
	
	$('#ball').mouseout(function(e){
		$(this).animate({
			top: '+=50px'
		});
	});
});

Bien sûr, javascript n'a pas été conçu pour créer ce genre d'animation, c'est beaucoup moins pratique de coder les différentes étapes que d'utiliser un système d'images clé comme on en trouver dans After Effects ou Flash.

Mais ça donne un aperçu de ce qu'on peut faire aujourd'hui avec un framework Javascript comme jQuery et un peu de CSS3...

Easing

Il existe un paramètre important dans ce système d'animations : Easing.

Il s'agit de la méthode qui contrôle l'animation. Par défaut, c'est le Easing linear qui est utilisé. Dans ce mode, l'animation est linéaire. Si par exemple vous animez le paramètre left de 0px à 100px pendant une durée de 2 secondes, à 1 seconde, left vaudra exactement 50px, et ainsi de suite.

Mais il y a d'autres easings qui ne sont pas du tout linéaires, certains accélèrent au fil du temps, d'autres simulent un rebond...

jQuery(document).ready(function($){
	$('#handle').click(function(e){
		$('#carre').slideToggle({ duration: 1000, easing: 'easeOutBounce'});
	});
});

Vous trouverez plus d'informations à ce sujet sur le site du plug-in jQuery Easing.

Allez donc jeter un oeil sur cette page : magic light.

Ce tutoriel fait partie d'un cours : aller au sommaire pour voir les autres chapitres.