当前位置：文江博客话题详情

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

发布于 2024-12-11 02:17:03 字数 177 浏览 0 评论 0原文

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

时光无声 2024-12-18 02:17:03

jQuerythrottle/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：请记住，附加到中方式可能会让您的事件被其他页面元素阻止（尽管对于 mousemove 事件来说不太可能）。

jQuery throttle/debounce is a great plugin for doing things like this safely. 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: bear in mind that attaching to <html> in that way could get your event blocked by other page elements (although unlikely for a mousemove event).

回复收藏 0 原文

星軌x 2024-12-18 02:17:03

尝试一下

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

可能需要不过要注意时间安排

回复收藏 0 原文

总以为 2024-12-18 02:17:03

像这样的东西吗？

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

});

Something like this?

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

});

回复收藏 0 原文

~没有更多了~