Discussion :

[mama07]

Salut,

je suis en train d'essayer de gérer des événements (hover) avec Jquery.

Ce que j'essaie de faire :

une div définie comme ca :

Code :

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

1
2
3
4
5
6
7
8
9
#graph{
    position:absolute;
    top:10px;
    left:20px;
    height:150px;
    width:40px;
    border:1px dotted red;
    background:#FFB0B0;
}

Je voudrais qu'au survol par la souris de cette div, elle "remonte" cad que sa hauteur soit nulle, puis quand la souris part qu'elle retrouve sa taille initiale.

Ce à quoi je suis arrivé :

j'ai mis ce javascript :

Code :

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

1
2
3
4
5
6
7
8
$("#graph").hover(
                    function (){
                        $(this).slideUp("slow");
                    },
                    function(){
                        $(this).slideDown("slow");
                    }
              );

Pour l'instant ca fonctionne, mais si la souris part avant que la div soit complétement remonter, elle remonte quand meme jusqu'en haut, puis retrouve ca taille normale.

Ma question est : comment faire en sorte que cette "animation" s'arette si la souris n'est plus au dessus de la div ?

[JeitEmgie]

Salut,

je suis en train d'essayer de gérer des événements (hover) avec Jquery.

Ce que j'essaie de faire :

une div définie comme ca :

Code :

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

1
2
3
4
5
6
7
8
9
#graph{
    position:absolute;
    top:10px;
    left:20px;
    height:150px;
    width:40px;
    border:1px dotted red;
    background:#FFB0B0;
}

Je voudrais qu'au survol par la souris de cette div, elle "remonte" cad que sa hauteur soit nulle, puis quand la souris part qu'elle retrouve sa taille initiale.

Ce à quoi je suis arrivé :

j'ai mis ce javascript :

Code :

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

1
2
3
4
5
6
7
8
$("#graph").hover(
                    function (){
                        $(this).slideUp("slow");
                    },
                    function(){
                        $(this).slideDown("slow");
                    }
              );

Pour l'instant ca fonctionne, mais si la souris part avant que la div soit complétement remonter, elle remonte quand meme jusqu'en haut, puis retrouve ca taille normale.

Ma question est : comment faire en sorte que cette "animation" s'arette si la souris n'est plus au dessus de la div ?

avez-vous essayé d'ajouter un
$(this).stop() ;
avant les slideUp/Down ?

(faudra peut-être utiliser animate() directement…)

[talvins]

Bonjour,

Je crois avoir posée une question identique il y a peu, qui n'a pas reçue de réponse.

stop() fonctionne mais il faut bien comprendre sur quoi il agit et quel événement tu utilises.

Ca ne fonctionnait pas bien dans mon cas et j'ai donc utilisé dequeue() mais ce dernier a amené d'autres problèmes curieux (ça virait de la queue d'autres événements).

[Thes32]

salut,

je crois que tu peux faire appel à la fonction callback

dans hover

Code :

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

1
2
 
$(this).slideDown("slow",reduire())

un peu plus loin...

Code :

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

1
2
3
4
 
function reduire() {
  // définit un style DOM qui donne ta bonne taille
}