Question

$("#profile_bar").mouseover(function()
{
    $("#profile_bar")stop(true).animate({
        marginTop : "0px"
    }, 300);
});

$("#profile_bar").mouseleave(function()
{
    $("#profile_bar").stop(true).delay(2000).animate({
        marginTop : "-70px"
    }, 300);
});

At the moment I have the code you see above. What I want to happen is:

When I hover the div #profile_bar, it moves 70 pixels down. When I go away from that div, and go back to it, within 2 seconds, It has to stop the MouseLeave function and actually nothing should happen.

Can someone give me a hint or help me out?

Answer 1

var timeouts = {};
$("#profile_bar").mouseover(function()
{
    clearTimeout(timeouts['profile_bar']);
    $("#profile_bar").stop(true).animate({
        marginTop : "0px"
    }, 300);
});

$("#profile_bar").mouseleave(function()
{
    timeouts['profile_bar'] = setTimeout(function(){
        $("#profile_bar").stop(true).animate({
            marginTop : "-70px"
        }, 300);
    }, 2000);
});