Jquery verzögerte css div Position

Question

Ich versuche, meine Menüleiste teilweise ausblenden nach einer Zeitüberschreitung von etwa 5 Sekunden Inaktivität. Das Menü ist 20px vom oberen Rand der Seite positioniert und die Grundidee ist, dass ein kleiner Abschnitt des Menüs sichtbar ist, sobald er nach oben gerückt ist, damit der Benutzer den Mauszeiger darüber bewegen kann, damit er wieder herunterfährt (hoffentlich macht das) Sinn!).

Ich habe die Animationsseite aber nicht ganz das Timeout geschafft. Irgendwelche Ideen?

Answer 1

Leider jQuery hat keine Verzögerungsfunktion. Sie können jedoch einen hinterhältigen und nicht allzu schmutzig Hack verwenden, um eine Verzögerung zu simulieren, indem Sie die Opazität eines Element von 1 bis 1 Animieren:

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

So Ihr Menü 5 Sekunden nachdem die Maus Blätter nach oben zu gleiten Sie könnten Folgendes tun:

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

Answer 2

Sie sollten die mouseout Ereignis des div verwenden, um das Menü eine Funktion wie diese umzusetzen darstellt:

var waitingForMenuToHide = false; 

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

und die mouseover Ereignis die waitingForMenuToHide Variable zurück:

function myMouseOver() { 
    waitingForMenuToHide = false; 
} 

Answer 3

Versuchen Sie, HoverIntent zu betrachten. http://cherne.net/brian/resources/jquery.hoverIntent.html

Dies macht es sehr einfach, Aktionen eine Verzögerung durchzuführen, nachdem der Benutzer aufgehört hat, mit Ihrem Menü zu interagieren.

Answer 4

Beim mouseout-Ereignis starten Sie ein Timeout mit dem Callback, um das Element nach oben zu scrollen. Auf dem mousover Ereignisse, wenn ein Timeout ist, tötet es mit:

clearTimeout(timer); 

So wird es sein, so etwas wie:

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