沒有鍵盤/鼠標輸入時的淡出控制

Question

基於此script我在Stack Overflow上找到了，我嘗試調整它以淡出HTML頁面上的編輯器面板。淡出效果很好，但我想限制淡出不被觸發。

我希望完成的任務是防止鼠標懸停在編輯器面板（和子控件）上或當其中一個輸入子項中出現鍵盤活動時淡出。

var i = null; 

// this part is working 
$("#my-canvas").mousemove(function() { 
    clearTimeout(i); 
    $("#panel,#btn-panel-toggle,#fps").fadeIn(200); 
    var i = setTimeout('$("#panel,#btn-panel-toggle,#fps").fadeOut(800);', 3000); 
}) 

// this part is not working 
$("#panel").mouseover(function() { 
    clearTimeout(i); 
}) 

舉一個實例，請看看這個jsFiddle。

Answer 1

這裏需要兩個獨立變量來指示input#sc-url是否被聚焦，並且div#panel是否被鼠標懸停。然後，您可以用這些功能處理定時器：

$(function() { 

    var t = null; //timer 
    var is_url_focused = false, is_panel_hovered = false; 
    var panel = $('#panel'); 

    function hide_panel(){ 
     if (t) { 
      clearTimeout(t); 
     } 
     t = setTimeout(function(){ 
      if (is_url_focused || is_panel_hovered) { 
       return; 
      } 
      panel.stop().animate({ 
       opacity:0 
      },800, function(){ 
       panel.hide(); // == diplay:none 
      }); 
     },2000); 
    } 

    function show_panel(){ 
     panel.show().stop().animate({ 
      opacity:1 
     },800); 
    } 

    $('#my-canvas').mouseenter(function(){ 
     show_panel(); 
    }).mouseleave(function(){ 
     hide_panel(); 
    }); 
    $('#panel').hover(function(){ 
     is_panel_hovered = true; 
     show_panel(); 
    }, function(){ 
     is_panel_hovered = false; 
     hide_panel(); 
    }); 
    $('#sc-url').focus(function(){ 
     is_url_focused = true; 
     show_panel(); 
    }).blur(function(){ 
     is_url_focused = false; 
     hide_panel(); 
    }); 
    $('#btn-panel-toggle').click(function(){ 
     if (panel.is(':hidden')) { 
      panel.css('opacity',1).show(); 
     } else { 
      panel.css('opacity',0).hide(); 
     } 
    }); 

}); 

http://jsfiddle.net/w9dv4/3/