JeuWeb - Crée ton jeu par navigateur
[jQuery] Fadeto - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [jQuery] Fadeto (/showthread.php?tid=3842)



[jQuery] Fadeto - phenix - 30-03-2009

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/


RE: [jQuery] Fadeto - Mycroft - 30-03-2009

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. Smile

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.


RE: [jQuery] Fadeto - madri2 - 30-03-2009

je crois que la méthode à effectuer est:

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


RE: [jQuery] Fadeto - Mycroft - 30-03-2009

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 Smile )

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


RE: [jQuery] Fadeto - phenix - 30-03-2009

Merci à madri2, sont code fonctionne.