Question

基于我在Stack Overflow上找到的这个script，我尝试调整它以淡出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/

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

1 个答案: