Jquery différé css div position

Question

J'essaie de masquer partiellement la barre de menu après un délai d'environ 5 secondes d'inactivité. Le menu est positionné à 20px du haut de la page et l'idée de base est qu'une petite section du menu sera toujours visible une fois qu'il aura été déplacé pour permettre à l'utilisateur de passer au-dessus pour qu'il redescende (espérons que cela fait sens!).

J'ai géré le côté animation mais pas tout à fait le timeout. Des idées?

Answer 1

Malheureusement jQuery n'a pas de fonction de délai. Cependant, vous pouvez utiliser un hack sournoise et pas trop sale pour simuler un retard, en animant l'opacité d'un élément du 1 à 1:

$('#visibleElement')    // Assuming the element is already shown 
    .animate({opacity: 1.0}, 3000); // do nothing for 3 seconds 

Donc, pour glisser votre menu 5 secondes après que les feuilles de souris vous pourriez faire ce qui suit:

$('#menuDiv').mouseout(function(){ 
    .animate({opacity: 1.0}, 5000) 
    .animate(slide up etc... 
}); 

Answer 2

Vous devez utiliser l'événement mouseout du div qui représente le menu pour implémenter une fonction comme ceci:

var waitingForMenuToHide = false; 

function myOnMouseOut() { 
    waitingForMenuToHide = true; 
    setTimeout(function() { 
     if (waitingForMenuToHide) { 
      // Hide the menu div... 
     } 
    }, 5000); 
} 

et l'événement mouseover pour réinitialiser la variable waitingForMenuToHide:

function myMouseOver() { 
    waitingForMenuToHide = false; 
} 

Answer 3

Essayez de regarder HoverIntent. http://cherne.net/brian/resources/jquery.hoverIntent.html

Cela rend assez facile d'effectuer des actions un délai après que l'utilisateur a cessé d'interagir avec votre menu.

Answer 4

Lors de l'événement mouseout, démarrez un délai d'attente avec le rappel pour faire défiler l'élément vers le haut. En cas de mousover, s'il y a un délai d'attente, le tuer en utilisant:

clearTimeout(timer); 

Alors ce sera quelque chose comme:

var timer; 
$('mybar').mouseover(function(){clearTimeout(timer);/* Animate down code here */}); 
$('mybar').mouseout(function(){timer=setTimeout(function(){/* Animate up Code Here */}, 5000);});