Jouer avec JQuery et les couleurs au survol

Aujourd’hui, une petite astuce pour faire un menu sympathique. L’idée est simple mais elle fait son effet : changer de couleur de façon aléatoire au survol. C’est applicable sur n’importe quel élément bien sur !

On va commencer par sauvegarder l’ancienne couleur. Forcément, puisqu’il faut bien revenir sur la couleur de base au mouse out ! Pour faire cela, il faut d’abord déclarer la variable, avant de détecter le mouse hover. Pourquoi? Tout simplement parce que le mouse out va se gérer dans une fonction à part :

var savecolor;

Ensuite, on initialise la détection du mouse hover. J’ai choisi de changer la couleur des liens dans les li du ul#menu :

$("ul#menu li a").hover(function(){ //action au survol }, function(){ //action au mouse out});

Maintenant, on remplit les trous ! Au survol, je veux récupérer l’ancienne couleur. Ensuite, je définis une nouvelle couleur aléatoire en RGB. Enfin, j’envoie l’animation :

savecolor = $(this).css("color");
var couleur = "rgb("
	+ (Math.floor(Math.random() * 256)) + ","
	+ (Math.floor(Math.random() * 256)) + ","
	+ (Math.floor(Math.random() * 256))
+ ")";
$(this).animate( { color: couleur }, 500);

Et puis enfin, pour revenir en arrière, on remplit le mouse out :

$(this).stop().animate( { color: savecolor }, 500);

Voilà le code complet :

$(document).ready(function() {
    var savecolor;
	$("ul#menu li a").hover(
		function(){
			savecolor = $(this).css("color");
			var couleur = "rgb("
				+ (Math.floor(Math.random() * 256)) + ","
				+ (Math.floor(Math.random() * 256)) + ","
				+ (Math.floor(Math.random() * 256))
			+ ")";
			$(this).animate( { color: couleur }, 500);
		},
        function() {
            $(this).stop().animate( { color: savecolor }, 500);
        }
    );
});

Petite variante

Pour varier les plaisirs, si vous souhaitez que la couleur change continuellement tant que votre souris reste sur le lien :

function changercouleur(e) {
	var couleur = "rgb("
		+ (Math.floor(Math.random() * 256)) + ","
		+ (Math.floor(Math.random() * 256)) + ","
		+ (Math.floor(Math.random() * 256))
	+ ")";
	$(e).animate( { color: couleur }, 500, function(){
		changercouleur(e)
	});
}
$(document).ready(function() {
    var savecolor;
	$("ul#menu li a").hover(
		function(){
			savecolor = $(this).css("color");
			changercouleur($(this));
		},
        function() {
            $(this).stop().animate( { color: savecolor }, 500);
        }
    );
});

Voilà, j’espère que ça vous sera potentiellement utile !