在鼠标不活动设置为一个 div 时隐藏 div

Question

我找到了一个脚本，想稍微修改一下。当用户在某个 div #gallery 上处于非活动状态或处于活动状态时，我试图为 div #menuwrap 设置动画。

现在它在第一次动画后，即使在#gallery 之外仍然会动画。

非常感谢任何帮助！

演示：http://jsfiddle.net/m2FvY/1/

   $('#gallery').mouseover(function() {
        var interval = 1;
       setInterval(function(){            
           if(interval == 5){
               $('#menuwrap').animate({top: '-50px'}, 100); 
               interval = 1;
           }
           interval = interval+1;
            console.log(interval);
        },200); 

        $('#gallery').bind('mousemove keypress', function() {
            $('#menuwrap').animate({top: '0'}, 100); 
            interval = 1;
        }); 
});

Answer 1

JSFIDDLE DEMO

只要用户在#gallery 上触发 mousemove 或 keypress 事件，延迟计时器就会重置。您还可以在其中添加悬停事件，以确保菜单在悬停在#gallery 上时永远不会隐藏。

    var interval = 1;

    function delayCheck()
    {
       if(interval == 5)
       {
           $('#menuwrap').animate({top: '-50px'}, 100);
           interval = 1;
       }
       interval = interval+1; console.log(interval);
    }

    $('#gallery').bind('mousemove keypress', function() {
        $('#menuwrap').animate({top: '0'}, 100);
        interval = 1;

        // reset the delay timer
        clearInterval(_delay); console.log('reset timer');
        _delay = setInterval(delayCheck, 500);
    });


    // starts delay timer when page loads
    _delay = setInterval(delayCheck, 500);

---

回答第 2 部分

JSFIDDLE DEMO #2

仅在 #gallery 事件 mousemove 或 keypress 被触发后检查不活动。一旦用户移出#gallery 框，它将终止delayCheck() 并将#menuwrap 设置回顶部：-50px。

    var interval = 1;
    _delay = 0;

    function delayCheck()
    {
       if(interval == 5)
       {
           $('#menuwrap').animate({top: '-50px'}, 100);
           interval = 1;
           clearInterval(_delay);
       }
       interval = interval+1;
       console.log(interval);
    }

    // turn delayCheck() ON, when mousing to #gallery
    $('#gallery').bind('mousemove keypress', function()
    {
        console.log("mousemove keypress");

        $('#menuwrap').animate({top: '0'}, 100);
        interval = 1;

        // reset delayCheck
        clearInterval(_delay);
        _delay = setInterval(delayCheck, 500);
    });

    // turn delayCheck() OFF, when mousing out of #gallery
    $('#gallery').mouseout(function(){
        console.log("mouseout");
        $('#menuwrap').animate({top: '-50px'}, 100);
        interval = 1;

        clearInterval(_delay);
    });