Question

I searched for this but didn’t find an solution that totally fixed my problem.

I got 2 divs that are over each other. Where div #2 isn’t shown (display:none).

Now what I want is that if I hover over div #1, div #2 slides down (open) at his current position.

Then div #2 should stay open when people are hovering over div #2, when they leave the hover status of div #2 for more then 5 seconds div #2 slides up again.

I made a fiddle to illustrate my div positions.

Answer 1

Using jQuery to keep the code simpler. One way to do what you want is to pair a global variable with a setTimeout function. The timeout checks if the mouse is still out of the div after five seconds, and if so, slides it up and out of sight.

$('.button').click(function() {
    $('.showme').slideDown();
});

$('.showme').mouseout(function() {
    window.isoverdiv = false;
    setTimeout(function() {
        if (!window.isoverdiv) {
            $('.showme').slideUp();
        }
    }, 5000);
});

$('.showme').mouseover(function() {
    window.isoverdiv = true;
});

http://jsfiddle.net/mblase75/TxnDd/2/