Les animations

Les animations

Tutoriel publié en mai 2011 par Galdon dans la catégorie jQuery

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>
Tester /ressources/exemple/cours-jquery/ch4_exemple1.html
Exemple 1
Quelques effets jQuery

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'
		});
	});
});
Tester /ressources/exemple/cours-jquery/ch4_exemple2.html
Exemple 2
Un carré mobile

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'
		});
	});
});
C'est quoi $(this) ?

Note : Vous voyez que j'ai utilisé le sélecteur avec le paramètre this ("ça" en Anglais).

En jQuery, $(this) désigne l'objet courant, on l'utilise souvent dans les fonctions anonymes qu'on bind à un événement.

Dans mon exemple ci-dessus, $(this) désigne l'élément portant l'id "ball", et $(this) est équivalent à $('#ball').

C'est mieux que de réécrire le sélecteur de l'élément à chaque fois, car ça facilite les mises à jour, et c'est plus propre.


Attention : $(this) c'est pas tout à fait la même chose que this !
$(this) retourne un objet jQuery, alors que this est un objet Javascript de base (c'est du natif), ça signifie qu'avec this vous ne pourrez pas utiliser des fonctions jQuery comme fadeIn, fadeOut...

Tester /ressources/exemple/cours-jquery/ch4_exemple3.html
Exemple 3
Un carré mobile qui tire un boulet sauteur
(passez la souris sur la boule bleue pour la faire monter, sortez pour la faire redescendre)

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'});
	});
});
Tester /ressources/exemple/cours-jquery/ch4_exemple4.html
Exemple 4
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.

24 commentaires :
Seuls les 10 derniers commentaires sont affichés.
Cliquez ici pour afficher tous les commentaires
commentaire n°8057 par Fopaway@rvmail.xyz
Fopaway@rvmail.xyz lundi 20 septembre 2021, 04:54
https://buypriligyhop.com/ - Priligy
commentaire n°8197 par ImmuslY@supmail.xyz
ImmuslY@supmail.xyz mercredi 22 septembre 2021, 16:36
<a href=https://buylasixshop.com/>;Lasix</a>
commentaire n°8379 par ImmuslY@supmail.xyz
ImmuslY@supmail.xyz samedi 25 septembre 2021, 19:53
<a href=https://buylasixshop.com/>;Lasix</a>
commentaire n°8381 par chishar@sqmail.xyz
chishar@sqmail.xyz samedi 25 septembre 2021, 20:15
<a href=https://buypriligyhop.com/>;priligy over the counter</a>
commentaire n°8406 par Fopaway@rvmail.xyz
Fopaway@rvmail.xyz dimanche 26 septembre 2021, 11:14
https://buypriligyhop.com/ - Priligy
commentaire n°8515 par MugSpooro@supmail.xyz
MugSpooro@supmail.xyz dimanche 3 octobre 2021, 02:12
https://buyneurontine.com/ - gabapentin interactions
commentaire n°8643 par teptupdah@sqmail.xyz
teptupdah@sqmail.xyz mercredi 6 octobre 2021, 22:02
https://prednisonebuyon.com/ - Prednisone
commentaire n°8693 par drodumn@abdiell.xyz
drodumn@abdiell.xyz vendredi 8 octobre 2021, 07:06
<a href=https://buyneurontine.com/>;Neurontine</a>
commentaire n°8710 par MugSpooro@supmail.xyz
MugSpooro@supmail.xyz vendredi 8 octobre 2021, 21:07
https://buyneurontine.com/ - gabapentin for cats buy online
commentaire n°8712 par teptupdah@sqmail.xyz
teptupdah@sqmail.xyz vendredi 8 octobre 2021, 23:31
https://prednisonebuyon.com/ - Prednisone
facultatif
Facebook Twitter RSS Email
Forum Excel
Venez découvrir le nouveau forum excel question/réponse à la stackoverflow.com !
Forum Excel
hit parade n'en a rien a foutre du W3C Positionnement et Statistiques Gratuites Vincent Paré