Tutoriel JQuery : Jouer avec FadeTo()

Réaliser une belle guirlande, toute en css3 et en javascript, c’est possible. Donner l’impression qu’une trainée de lumière passe sur toutes les entrées d’un menu, c’est possible aussi. Explications…

Si vous ne connaissez pas la fonction fadeTo de JQuery, je vous invite à en lire la documentation. Néanmoins, en voici une rapide description: fadeTo( duration, opacity, [ callback ] ). Par exemple $(« #monId »).fadeTo(« fast », 0.5, mafonction()); va faire diminuer en fondu l’opacité de l’Id « monId » vers une opacité de 50%, avec la rapidité « fast », et va appeler mafonction() à la fin du fondu. On peut ainsi jouer avec les appels récursifs…

La guirlande

L’idée ici est de jouer sur deux variables qui vont s’entrecroiser récursivement, sans forcément rentrer dans une boucle infinie.  En gros, voici la structure du code HTML :

<div id="menu">
	<div class="bouton" id="1"></div>
	<div class="bouton" id="2"></div>
	<div class="bouton" id="3"></div>
	<div class="bouton" id="4"></div>
	<div class="bouton" id="5"></div>
	<div class="bouton" id="6"></div>
	<div class="bouton" id="7"></div>
	<div class="bouton" id="8"></div>
	<div class="bouton" id="9"></div>
	<div class="bouton" id="10"></div>
	<div class="bouton" id="11"></div>
	<div class="bouton" id="12"></div>
	<div class="bouton" id="13"></div>
	<div class="bouton" id="14"></div>
	<div class="bouton" id="15"></div>
</div><br /><br />
<span class="go" onClick="javascript:initguirlande();">C'est parti!</a>
<a href="#" class="go" onClick="javascript:arreter();">Stop</a>

Bien entendu, on rajoute le code css :

.bouton{
	width: 20px;
	height: 20px;
	background :#4F403D;
	display: inline-block;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}
span.go{
	text-decoration: none;
	background: #FF8000;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	color: #fff;
	padding: 5px;
	text-shadow: 1px 1px 1px #777;
	box-shadow: 0px 0px 5px #555;
	-moz-box-shadow: 0px 0px 5px #555;
	-webkit-box-shadow: 0px 0px 5px #555;
}
span.go:active{
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	padding: 4px;
	margin: 1px;
}

Ensuite, le code javascript qui va avec :

var continuer = true;
function initguirlande(){
	var nbBoutons = 15;
	guirlande(1,nbBoutons, nbBoutons);
}
function guirlande(e, f, stop){
	if(continuer == true){
		$('#'+e).css("background", "#4EB6BF");
		$('#'+e).fadeTo(100, 0.2, function(){
			$('#'+e).fadeTo(100, 1, guirlande(e+1, f, stop));
			$('#'+e).css("background", "#4F403D");
			if (f>0){
				$('#'+f).fadeTo(100, 0.5, function(){
					$('#'+f).fadeTo(100, 0.8, guirlande(e, f-1, stop));
					$('#'+f).css("background", "#4EB6BF");
				});
			}
		});
	}
}

Ce qui donne :

La traversée

On peut jouer avec ce code javascript :

function inittraverse(){
	var nbBoutons = 15;
	papy(1, nbBoutons);
	brossard(1, nbBoutons);
}
function papy(e, stop){
	if (e<=stop){
		$('#'+e).css("background", "#4EB6BF");
		$('#'+e).fadeTo(100, 0.5, function(){
			$('#'+e).fadeTo(100, 0.8, papy(e+1, stop));
		});
	}
}
function brossard(e, stop){
	if (e<=stop){
		$('#'+e).css("background", "#4EB6BF");
		$('#'+e).fadeTo(100, 0.2, function(){
			$('#'+e).fadeTo(100, 1, brossard(e+1, stop));
			$('#'+e).css("background", "#4F403D");
		});
	}
}

Ce qui donne à l’appel d’inittraversee() :

K2000

Oui oui, on va faire kit 🙂 Le code javascript est un peu long mais relativement clair :

function initkit(){
	var nbBoutons = 15;
	choco(1, nbBoutons);
	pops(1, nbBoutons);
}
function choco(e, stop){
	if (e<=stop){
		$('#'+e).css("background", "#4EB6BF");
		$('#'+e).fadeTo(50, 0.5, function(){
			$('#'+e).fadeTo(50, 0.8, choco(e+1, stop));
		});
	}
	else
		petits(stop, stop);
}
function pops(e, stop){
	if (e<=stop){
		$('#'+e).css("background", "#4EB6BF");
		$('#'+e).fadeTo(50, 0.2, function(){
			$('#'+e).fadeTo(50, 1, pops(e+1, stop));
			$('#'+e).css("background", "#4F403D");
		});
	}
	else
		filous(stop, stop);
}
function petits(e, stop){
	if (e>0){
		$('#'+e).css("background", "#4EB6BF");
		$('#'+e).fadeTo(50, 0.5, function(){
			$('#'+e).fadeTo(50, 0.8, petits(e-1, stop));
		});
	}
	else
		choco(1, stop);
}
function filous(e, stop){
	if (e>0){
		$('#'+e).css("background", "#4EB6BF");
		$('#'+e).fadeTo(50, 0.2, function(){
			$('#'+e).fadeTo(50, 1, filous(e-1, stop));
			$('#'+e).css("background", "#4F403D");
		});
	}
	else
		pops(1, stop);
}

Et voilà ce que ça donne :