JQuery - Mouseleave setTimeout Error

Question

i'm currently trying to sort out a problem with the following script. When you hover over a certain area it should make the div appear pretty much instantly, then when you leave that area it should disappear after a set amount of time.

This all works like a charm but the problem is if you leave the browser page frame with the mouse after hovering over it, it bodges up and the div wont appear when you hover over it anymore.

Any help would be greatly appreciated, thank you

$('.loginHider').mouseenter(function(){
        $('.loginBar').stop(true, true).animate({marginTop: '0px'}, 150);
        $('#loggedIn').stop(true, true).animate({marginTop: '20px'}, 150);
    }).mouseleave(function(){
        setTimeout(function() {
            $('.loginBar').stop(true, true).animate({marginTop: '-50px'}, 150);
            $('#loggedIn').stop(true, true).animate({marginTop: '-30px'}, 150);
        }, 1200);   
    });

~Matt

Answer 1

Try

$('.loginHider').mouseenter(function () {
    //clear the existing timer
    clearTimeout($(this).data('mouseTimer'))
    $('.loginBar').stop(true, true).animate({
        marginTop: '0px'
    }, 150);
    $('#loggedIn').stop(true, true).animate({
        marginTop: '20px'
    }, 150);
}).mouseleave(function () {
    var timer = setTimeout(function () {
        $('.loginBar').stop(true, true).animate({
            marginTop: '-50px'
        }, 150);
        $('#loggedIn').stop(true, true).animate({
            marginTop: '-30px'
        }, 150);
    }, 1200);
    $(this).data('mouseTimer', timer);
});