JQuery - Mouseleave setTimeout Error

Question

В настоящее время я пытаюсь решить проблему со следующим скриптом. Когда вы наводите курсор на определенную область, он должен заставить div появляться в значительной степени мгновенно, а затем, когда вы покидаете эту область, он должен исчезнуть через определенное количество времени.

Все это работает как шарм, но проблема в том, что если вы оставите рамку страницы браузера с помощью мыши после зависания над ней, она появится, и div не появится, когда вы наведете на нее больше.

Любая помощь будет принята с благодарностью, спасибо

$('.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

Попробуйте

$('.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); 
});