JQuery - Mouseleave setTimeout錯誤

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); 
    }); 

〜馬特

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); 
});