0

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

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

这是我到目前为止所拥有的：http: //jsfiddle.net/BEzbw/

4

3 回答 3

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>这种方式附加到可能会使您的事件被其他页面元素阻止（尽管不太可能发生 mousemove 事件）。

于 2011-10-22T01:25:48.473 回答
0

试试这个

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

可能需要在时间上工作

于 2011-10-22T00:57:57.443 回答
0

像这样的东西？

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

});
于 2011-10-22T01:03:32.413 回答