0

我找到了一个脚本，想稍微修改一下。当用户在某个 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;
        }); 
});
4

1 回答 1

1

JSFIDDLE 演示

每当用户在#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 演示 #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);
    });
于 2012-04-04T20:26:48.763 回答