[jQuery] Fadeto

[phenix]

Bonjour à tous,

Voila, pour le nouveau désign de la vallée des larmes, j'ai décidé d'utiliser la fonction Fadeto pour mettre les liens en surbrillance.

La technique est simple, je mes l'image sans brillance avec un background en brillance. Ensuite, jQuery ce charge du reste:

Code :

/* HoverFade*/
$("img.HoverFade").hover(
function()
         {
               $(this).fadeTo(1000,0);
         }
      ,
function()
        {
              $(this).fadeTo(1000,1);
        }
);

Le problème réside dans le faite qu'il compte le nombre de passage de la souris et exécute fadeto chaque foi.

Si l'utilisateur passe sa souris plusieurs fois dessus rapidement, le lien clignote...

Quelqu'un connait une solution ?

Démo: http://www.valleedeslarmes.info/phenix_factory/

[Mycroft]

Déjà l'effet est très sympa sur l'ange ! Bravo pour l'utilisation de l'effet !

Je connais pas le javascript, mais de façon général, je mettrais une variable "enCours" que je passe à true quand l'effet commence.

Tant que l'effet est "enCours", on ne peut pas avoir d'autre effet qui se declenche. C'est un principe de Semaphore en fait.

Attention je ne connais pas du tout le JS, donc ce code est probablement erronné au moins syntaxiquement.

Code :

/* HoverFade*/
var enCours = false;
$("img.HoverFade").hover(
function()
         {
            if( enCours == false )
              {
               $(this).fadeTo(1000,0);
               enCours = true;
               setTimeout('enCours=false',2000);
               }
         }

Ca empêche l'effet de se déclencher à chaque fois, il faut probablement une autre variable pour le fade out.

Je viens de réfléchir que c'est idiot : ça limite l'effet à une image à la fois. L'alternative, c'est un semaphore par image.

[madri2]

je crois que la méthode à effectuer est:

/* HoverFade*/
$("img.HoverFade").hover(
function()
{
$(this).stop().fadeTo(1000,0);
}
,
function()
{
$(this).stop().fadeTo(1000,1);
}
);

[Mycroft]

Pour rebondir sur le post précédent apparament il y a un paramètre 'clearqueue' pour vider la queue des effets j'imagine que c'est ça qu'il faut utiliser. ( Comment ? aucune idée )

http://docs.jquery.com/Effects/stop

[phenix]

Merci à madri2, sont code fonctionne.