没有键盘/鼠标输入时的淡出控制

基于此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。

来源

2013-07-13 idleberg

这里需要两个独立变量来指示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/

来源

2013-07-13 14:46:03 Stano

根据需要这个工程差不多。然而，它只是在指针已经在面板上之后才初始化。此外，隐藏后只显示悬停在面板上（而不是整个画布）。我尝试了一些东西，但没有按要求工作。 – idleberg

这是真的，我希望编辑器面板在有人使用它时保持可见。然而，如果有人从不使用编辑器，它应该淡出。一旦淡出，（全尺寸）画布上的任何鼠标移动都应淡入其中（否则必须知道隐藏面板的位置）。 – idleberg

大概理解，谢谢澄清！所以面板应该只在鼠标悬停在画布上时出现。 – Stano

没有键盘/鼠标输入时的淡出控制

回答

相关问题