0

根据我在 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。

4

1 回答 1

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/

于 2013-07-13T14:46:03.727 回答