Question

我正在创建一个标题菜单，当您在浏览器窗口中移动鼠标时，该菜单会向下滑动。

但我希望在鼠标没有移动5秒后让它向上滑动。

Answer 1

jQuery throttle/debounce是一个很好的插件，可以安全地执行此类操作。 jsFiddle

$('html').mousemove( $.debounce( 250, true, function(e){
        $('header').animate({ top: '0' }, 300)
    }))
    .mousemove( $.debounce( 5000, false, function(e){
        $('header').animate({ top: '-60px' }, 300)
    }));

ps：请记住以这种方式附加到<html>可能会使其他页面元素阻止您的事件（尽管不太可能发生鼠标事件）。

Answer 2

尝试一下

http://jsfiddle.net/lastrose/BEzbw/3/

可能需要处理时间

Answer 3

这样的东西？

$(document).ready( function () {

    $('header').css('top', '-60px');
    $('html').mousemove(function(event) {
        $('header').animate({ top: '0' }, 300);
    });

    //Increment the idle time counter every second.
    idleTime = 0;
    var idleInterval = setInterval("timerIncrement()", 6000);

    //Zero the idle timer on mouse movement.
    $(this).mousemove(function (e) {
        idleTime = 0;
    });
    $(this).keypress(function (e) {
        idleTime = 0;
    });

    function timerIncrement() {
        idleTime = idleTime + 1;
        if (idleTime > 4) { // 5sec
            $('header').animate({ top: '-60px' }, 300);
        }
    }

});

Jquery：隐藏顶部菜单，向上滑动暂停鼠标移动

3 个答案: