[Webdesign] Un effet de fondu sur les liens avec jQuery

Tous les webdesigners et développeurs web en herbe maitrisent les propriétés CSS qui permettent de personnaliser les liens d’un sites.

En général, on utilise une couleur différente lorsque le lien est survolé, voire un fond différent, mais guère plus.

D’ailleurs, les propriétés en question ne proposent pas tant de possibilités que ça :

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

CssGlobe propose un petit hack qui permet de créer des effets de fondu lors du survol des liens sur les pages HTML.

(Voir une démo)

Le hack repose sur la superposition de deux identiques avec des classes différentes.

Le second élément est caché. Lorsque le lien est survolé, le premier fond en utilisant la méthode fadeTo de jQuery. L’effet visuel est vraiment très intéressant.

Voici le script complet :

this.fadeLinks = function() {	

	var selector = "a"; //modify this line to set the selectors
	var speed = "normal" // adjust the fading speed ("slow", "normal", "fast")

	var bgcolor = "#fff"; 	// unfortunately we have to set bg color because of that freakin' IE *!$%#!!?!?%$!
							//please use the same background color in your links as it is in your document. 

	$(selector).each(function(){
		$(this).css("position","relative");
		var html = $(this).html();
		$(this).html("<span class="one">"+ html +"</span>");
		$(this).append("<span class="two">"+ html +"</span<");
		if($.browser.msie){
			$("span.one",$(this)).css("background",bgcolor);
			$("span.two",$(this)).css("background",bgcolor);
			$("span.one",$(this)).css("opacity",1);
		};
		$("span.two",$(this)).css("opacity",0);
		$("span.two",$(this)).css("position","absolute");
		$("span.two",$(this)).css("top","0");
		$("span.two",$(this)).css("left","0");
		$(this).hover(
			function(){
				$("span.one",this).fadeTo(speed, 0);
				$("span.two",this).fadeTo(speed, 1);
			},
			function(){
				$("span.one",this).fadeTo(speed, 1);
				$("span.two",this).fadeTo(speed, 0);
			}
		)
	});
};

Le script est un peu compliqué car il traite le cas particulier de IE, qui nécessite de définir la couleur de fond de lien.

Vous n’avez plus qu’à « styler » vos liens avec un peu de CSS:

a{
	color:#f30;
	font-weight:bold;
	text-decoration:none;
	}
a span.two{
	color:#069;
	cursor:pointer;
}

Bien entendu, il vous faudra définir si tous les liens bénéficient de ce hack. Si ce n’est pas le cas, et que vous modifiez le CSS, n’oubliez pas de modifier également le script (par exemple pour les lien du div #content) :

var selector = "#content a";

Vous pouvez également définir la vitesse du fondu en utilisant les valeurs proposées par jQuery : slow, fast, normal.

Le script a été testé avec Firefox, IE7 et Opera sur Windows et Firefox et Safari sur Mac.

crédits: cssglobe