colors2 e1365078232840 800x510 - Jouer avec JQuery et les couleurs au survol

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 !

Laisser un commentaire

Votre adresse de courriel ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This site uses Akismet to reduce spam. Learn how your comment data is processed.