Faire des animations avec jQuery Queue

Août 2013

Sans mauvais jeu de mots, la queue est un élément central de jQuery, et pourtant peu de développeurs connaissent son existence où savent l'utiliser. Dans ce tutoriel, nous allons donc voir à quoi sert cette queue et dans quel cas l'utiliser.

Une queue jQuery est un tableau qui contient une liste de fonctions à exécuter de manière séquentielle, c'est à dire les unes après les autres (on dit aussi synchrone). Vous avez probablement déjà utilisé une queue jQuery sans le savoir, car la fonction .animate() ainsi que toutes les fonctions d'animation plus haut niveau tel que slideUp, slideDown, slideToggle, fadeIn, fadeOut, show ou hide, utilisent en interne une queue bien spécifique destinée à contenir les effets d'animation : la queue fx.

Prenons un exemple simple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
	var square = $('#square');
	
	square.show("fast");
	square.animate({left:'+=200'},2000);
	square.slideToggle(1000);
	square.slideToggle("slow");
	square.animate({left:'-=200'},1500);
	square.hide("fast");
	square.show(800);
	square.slideUp("normal");
});
</script>
</head>
<body>
	<div id="square" style="position:absolute; width:50px; height:50px; background:red;"></div>
</body>
</html>

Les différentes animations vont s'exécuter les unes après les autres, justement parce qu'en interne jQuery utilise la queue fx, que l'on peut afficher comme ceci :

$('#square').queue();

Alors bien sûr, pour le moment tout ça n'a pas grand intérêt à partir du moment ou on utilise que la queue fx. Nous allons maintenant voir pourquoi et comment créer une queue.

Créer une queue avec jQuery

Les lignes d'un script JavaScript sont exécutées elles aussi de manière séquentielle, les instructions sont appelées les unes après les autres. Dans ce cas on peut se demander pourquoi utiliser une queue, puisque le principe est exactement le même.

L'intérêt de jQuery.queue est de pouvoir gérer des animations complexes, en la découpant en une série d'animations plus petites que l'on place dans des fonctions, et ce sont ensuite ces fonctions que l'on empile dans une queue. L'avantage est qu'on peut ainsi mélanger des fonctions d'animation, de l'ajax, des délais (avec delay).

// Remplissage de la queue
$('#square').queue('une_queue', function(next){
	console.log('step 1');
	next();
});
$('#square').queue('une_queue', function(next){
	console.log('step 2');
	next();
});
$('#square').queue('une_queue', function(next){
	console.log('step 3');
	next();
});
$('#square').queue('une_queue', function(next){
	console.log('step 4');
	next();
});

// Lancer la queue manuellement
$('#square').dequeue('une_queue');

La page du jour est format tsv et csv sur excel, bonne lecture.

Il y a 2 choses à remarquer dans cet exemple :

Il est nécessaire d'appeler next() à la fin de chaque fonction étape, sinon le traitement de la queue s'arrête. Next est en fait une référence vers la fonction suivante dans la queue, qui est passée en paramètre à la fonction anonyme.
La queue ne se lance pas manuellement, il faut le lancer manuellement en utilisant jQuery.dequeue.

Vous devez aussi savoir qu'il y a 2 différences entre la queue fx (qui est un cas particulier) et une queue crée par l'utilisateur :

Démarrage automatique : la queue fx n'a pas besoin d'être lancée manuellement avec la fonction .dequeue()
Le premier élément de la queue fx contient une chaine de caractère qui indique l'état de la queue. Lorsqu'un cycle d'animation est en cours, la valeur de cet élément est "inprogress".

Découvrez ce tutoriel photoshop : carte de voeux feu d'artifice à lire tout de suite !

Fil de lecture

0 commentaire