Have Geek Brain

JQuery delays css div position

I am trying to get the menu bar to partially hide after about 5 seconds of inactivity timeout. The menu is positioned 20 pixels at the top of the page, and the basic idea is that a small portion of the menu will be visible when it is moved up so that the user can hover over it so that it falls out again (hopefully that makes sense!).

I did control the animation side, but not quite the timeout. Any ideas?

+1


a source to share


4 answers


Unfortunately jQuery doesn't have a delay feature. However, you can use a sneaky and not too messy hack to simulate delay by animating the element's opacity from 1 to 1:

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


So, to slide your menu 5 seconds after the mouse exits, you can do the following:

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


a source


You must use the event mouseout

for div

that represents the menu to implement this function:

var waitingForMenuToHide = false;

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


and mouseover

to reset the variable waitingForMenuToHide

:

function myMouseOver() {
    waitingForMenuToHide = false;
}
+2


a source


Try looking at HoverIntent. http://cherne.net/brian/resources/jquery.hoverIntent.html

This makes it easier to perform delay actions after the user has stopped interacting with your menu.

+2


a source


On the mouseout event, trigger a timeout with a callback to scroll the element up. On the mousover event, if there is a timeout, kill it using:

clearTimeout(timer);

So, it would be something like:

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


a source






More articles:


All Articles