I. Principe

L'idée est similaire à celle que j'ai déjà utilisée pour d'autres scripts. J'ai écrit une fonction qui sélectionne les liens (balises <a>), place leur contenu dans un <span> avec le nom de classe ".one" et ajoute un élément <span> avec le nom de classe ".two". <span> ".two" contient le même texte que <a> et est placé juste au-dessus à droite du texte du lien.

Image non disponible

Au départ, le deuxième <span> est caché. Lorsque le lien est survolé, le <span> ".two" transite en utilisant l'effet fadeTo de jQuery, pendant que <span> ".one" disparaît. Cela crée un effet de fondu en douceur vers une autre couleur. Voici le script entier comme je l'ai dans ma démo :

 
Sélectionnez

this.fadeLinks = function() {	
 
var selector = "a"; //modifier cette ligne pour cibler un sélecteur
var speed = "normal" // Ajuster la vitesse du fondu ("slow", "normal", "fast")
 
var bgcolor = "#fff"; 	
// malheureusement, nous devons spécifier la couleur
// de l'arrière-plan pour raison de compatibilité avec IE
// Utiliser la même couleur de fond dans vos liens que celle de votre page. 
$(selector).each(function(){ 
	$(this).css("position","relative");
	var html = $(this).html();
 
	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);
		}			
	)
});
};
 			

Bien sûr, IE est à l'origine de problèmes et nous avons eu à appliquer une solution de contournement. Etant donné qu'en transitant, IE pixelise le texte, nous devons définir une couleur d'arrière plan pour l'éviter.

II. Comment appliquer ce script sur votre site

II-1. Étape 1 - JavaScript

Téléchargez le fichier zip contenant mon script et la bibliothèque jQuery et placez-les sur votre site. J'ai toujours l'habitude de mettre tous les fichiers JavaScript dans un répertoire appelé "/js". Ensuite, inclure les lignes de code suivantes pour faire appel à la bibliothèque jQuery et au script de décoloration :

 
Sélectionnez

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/fadeLinks.js"></script>
				

II-2. Étape 2 - CSS

Ajoutez ces lignes à votre fichier CSS. Notez que j'utilise les selecteurs du fait que c'est une démo. Le style du lien est la valeur par défaut et le style de <span> est utilisé lorsque le lien est survolé.

 
Sélectionnez

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

II-3. Étape 3 - Modifications

Assurez-vous que les sélecteurs CSS sont correctement écrits de sorte que vous pouvez appliquer ce script sur des éléments précis. Sinon, il sera applicable à toutes les balises <a> du document. La modification des sélecteurs doit être faite dans le CSS et dans le srcipt. Si vous souhaitez appliquer cet effet sur les liens à l'intérieur d'une div avec l'id "content", votre css devra être écrit comme ceci :

 
Sélectionnez

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

Dans le fichier fadeLinks.js la variable appelant le sélecteur devrait ressembler à ceci:

 
Sélectionnez

var selector = "#content a";
				

Dans le cas où vous trouvez votre transition trop lente ou trop rapide, vous pouvez ajuster la variable appelée speed. Donnez-lui la valeur "slow", "normal" ou "fast".

III. Liens de téléchargement

Voir une démo : Démo.
Téléchargez les fichiers : Télecharger l'archive