Discussion :

[creatherm]

Bonjour à tous,

j'essaie de créer un effet de surbrillance progressive sur des liens en utilisant la bibliothèque jQuery. J'obtiens un résultat, mais malheureusement celui-ci est assez instable...

Si j'arrive bien à appliquer l'effet de surbrillance progressive sur un lien, si je passe plusieurs fois de suite sur le lien celui-ci se met à 'clignoter'. J'ai donc tenter d'utiliser la fonction 'stop', mais cela ne marche pas. Sur le site de la documentation :

http://api.jquery.com/stop/

On voit que de nombreuses personnes obtiennent des résultats assez instables. Pourtant, pour éviter de donner un 'impression' de bug à l'utilisateur final, la possibilité de gérer les queues d'animations est très importantes.

Ma question n'est pas tellement de vous demander comment faire (ceci-dit, si vous voulez débugger le code, allez-y : http://avis.creatherm.fr/new/js/ ) mais de savoir si vous avez déjà été confronté à ce type de problème et si vous utilisez des méthodes précises pour les régler ?

Peut-être motools permet-il de gérer plus finement ce type d'interaction ?

pour voir le bug, n'allez pas directement sur le site avis.creatherm.fr mais sur la version test : avis.creatherm.fr/new/.

Tous le javascript est accessible ici : http://avis.creatherm.fr/new/js/ ; celui qui gère l'effet de surbrillance progressive est là : http://avis.creatherm.fr/new/js/surbrille.js .

le code pour arrêter l'animation quand on quitte un lien est essentiellement là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$(".surbrille").children().mouseleave(function()   
   	{	
   		$(this).animate(blabla effet surbrillance);			
			$(this).parent().stop(false, true);
 
   	});

[d10g3n]

c'est vrai que la gestion du hover est assez lourde avec jQuery...
Pour obtenir un effet aussi simple que le changement de couleur d'un lien au passage de la souris (1 ligne en css), on est obligé de faire une animation pour le survol du lien, puis une autre pour le retrait de la souris...

Pour peu que le lien soit inclus dans élément de type bloc (ou une li en display:block) cela peut très rapidement devenir instable

l'idéal est d'utiliser la fonction hover ; qui est un raccourcis de mouseenter.mouseleave :

http://api.jquery.com/hover/

Bon, mais ça ne change pas le fait que quand on passe plusieurs fois de suite sur un lien celui-ci se met à clignoter. Il doit en effet y avoir un truc à gérer avec la fonction stop...