Animer un filtre d'affichage de liste avec JQuery

Pour animer un joli portfolio, rien de tel qu’un petit outil de filtre. On en voit à foison, et je voulais faire pareil. Seulement voilà, mon attention fut retenue par QuickSand, un plugin JQuery qui sur le papier fait quelque chose de très joli, mais punaise qu’est-ce que c’est lourd pour en arriver au même résultat ! Pas de problème, il y a une alternative et sans plugin (ou presque) !

Vous aurez juste besoin du plugin easing, mais si vous aimez faire de l’animation jquery vous l’avez dans tous les cas déjà sûrement inclut dans vos pages ! Du reste, c’est très simple, tout le secret réside dans ces quatre petits caractères : « :not ». Je m’explique.

Tout d’abord, le code HTML

Pour le moins classique, nous avons :

<div id="portfolio">
	<ul id="tri">
		<li class="tous">Tous</li>
		<li class="un">Un</li>
		<li class="deux">Deux</li>
	</ul>
	<ul id="liste">
	  <li class="tous un" style="background: #62164e">AAA</li>
	  <li class="tous deux" style="background: #86286e">AAA</li>
	  <li class="tous deux" style="background: #62164e">BBB</li>
	  <li class="tous un" style="background: #86286e">BBB</li>
	  <li class="tous deux" style="background: #da79c2">BBB</li>
	  <li class="tous deux" style="background: #f39079">BBB</li>
	</ul>
</div>

La première liste « #tri » sert de déclencheur, la seconde liste « liste » sert de conteneur. On notera par ailleurs quelque chose d’intéressant : les li de la liste « #tri » ont tous une classe distincte : « .tout », « .un » et « .deux ».
On retrouve ces classes dans les li de la liste « #liste ». D’ailleurs, ces li là ont deux classes : « .tous » et soit « .un » soit « .deux ».

Enfin, le javascript :

$("ul#tri li").click(function() {
	var easing = "easeOutQuad";
	var duree = 500;
	var cetteClasse = $(this).attr('class');
	if($("ul#liste li:not(."+cetteClasse+")").is(":visible"))
		$("ul#liste li:not(."+cetteClasse+")").animate({height: "hide", width: "hide"}, duree, easing);
	if($("ul#liste li."+cetteClasse+"").not(":visible"))
		$("ul#liste li."+cetteClasse+"").not(":visible").animate({height: "show", width: "show"}, duree, easing);
});

Explication

Les trois premières variables ne servent qu’à nous simplifier la vie : plutôt que d’avoir à changer partout l’effet ou la durée, on les met ici. Bref, ce qui est intéressant c’est ce que l’on voit dans l’action déclenchée par le clique sur un élément de la liste « #tri » :

if($("ul#liste li:not(."+cetteClasse+")").is(":visible"))

Et ça :

if($("ul#liste li."+cetteClasse+"").not(":visible"))

Le premier veut dire : « si tous les éléments de la liste #liste sauf ceux qui ont comme classe la même que celle sur laquelle je viens de cliquer sont visibles, alors cache les. Ainsi, on ne montre que ce qui nous intéresse.
Le second veut dire : « si tous les éléments de la liste #liste qui ont comme classe la même que celle sur laquelle je viens de cliquer sont invisibles, alors affiche les. Et en plus, c’est aussi valable pour afficher tous les éléments puisque tout le monde a bien la classe « .tous » !
Voilà, vous n’avez plus qu’à jouer sur les effets de transition et la durée. J’espère n’avoir perdu personne en route ^^