0

ブラウザ ウィンドウ内でマウスを動かすと下にスライドするヘッダー メニューを作成しています。

しかし、マウスが5秒間動かなかった後、スライドさせたいと思います。

これが私がこれまでに持っているものです: http://jsfiddle.net/BEzbw/

4

3 に答える 3

1

jQuery スロットル/デバウンスは、このようなことを安全に行うための優れたプラグインです。jsフィドル

$('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 に答える