Question

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

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

非常感谢任何帮助！

   $('#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 events 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);
    });

将鼠标隐藏div设置为一个div

1 个答案: