JQuery Verzögerung css div Position

Question

Ich versuche, meine Menüleiste teilweise versteckt nach einem Timeout von etwa 5 Sekunden lang nicht zu machen. Das Menü ist 20px von oben auf der Seite positioniert und die Grundidee ist, dass ein kleiner Teil des Menüs noch sichtbar sein wird, sobald es der Benutzer über diese bewegt hat bis zu ermöglichen, zu schweben für sie wieder fallen nach unten (hoffentlich macht Sinn!).

Ich habe die Animation Seite geschaffen, aber nicht ganz das Timeout. Irgendwelche Ideen?

Answer 1

Leider ist jQuery keine Verzögerungsfunktion hat. 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 nach oben gleiten, nachdem die Maus lässt Sie Folgendes tun können:

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

Answer 2

Versuchen Sie, bei HoverIntent suchen. http://cherne.net/brian/resources/jquery.hoverIntent.html

Das macht es ganz einfach, eine Verzögerung, um Aktionen, nachdem der Benutzer mit dem Menü zum Stillstand gekommen ist die Interaktion.

Answer 3

Sie sollten das mouseout Ereignis des div verwenden, die das Menü stellt eine Funktion wie folgt umzusetzen:

var waitingForMenuToHide = false;

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

und das mouseover Ereignis der waitingForMenuToHide Variable zurückgesetzt werden:

function myMouseOver() {
    waitingForMenuToHide = false;
}

Answer 4

Auf dem mouseout Ereignisse ein Timeout mit dem Rückruf starten Sie das Element nach oben zu blättern. Auf dem mousover Ereignisse, wenn ein Timeout ist, tötet es mit:

clearTimeout(timer); 

So wird es 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);});