2012-06-03 7 views
1

J'ai le code suivant. Lorsque la souris quitte #login, elle attend 500 ms et cache l'élément. Ce que je veux, c'est que si la souris quitte l'élément et y retourne dans 500 ms, elle ne cachera pas l'élément. Sinon, si la souris a été hors de la "plage" de l'élément plus de 500 ms, elle appellera la fonction animée et cachera l'élément.jQuery mouseout et setTimeout

Si je mets ce code là

$("#login").mouseover(function() { 
    clearTimeout(t); 
}); 

et je prends la souris sur l'élément quand il le fermer sortira à nouveau après l'animation est terminée.

Répondre

2

Déclarez une variable pour setTimeout, de sorte que vous pouvez utiliser clearTimeout:
(plus résolu votre problème "ça va de nouveau pop")

$("#login") 
    .mouseout(function() { 
     window.t = setTimeout(function() { 
      $("#login").animate({ 
       height: "toggle" 
      }) 
     }, 500); 
    }) 
    .mouseover(function(){ 
     if(window.t){ 
      clearTimeout(window.t); 
      window.t = undefined; 
     }else{ 
      //Do your menu popup thing here 
     } 
    }); 
1

Vous pouvez effacer le délai d'attente dans le mouseenter ou mouseover événements.

var t; 
$("#login").mouseenter(function() { 
    clearTimeout(t); 
}); 
$("#login").mouseout(function() { 
    t = setTimeout(function() { 
     $("#login").animate({ 
      height: "toggle" 
     }) 
    }, 500); 
}); 
+0

Qu'est-ce que c'est?? 'À la fin? –

+0

Hmm pas sûr comment cela est arrivé. J'ai modifié le post pour le supprimer. – sachleen