Jquery: скрытое верхнее меню, скользить вверх при приостановленном движении мыши - PullRequest
Новая
       5

Jquery: скрытое верхнее меню, скользить вверх при приостановленном движении мыши

0 голосов
/ 22 октября 2011

Я создаю меню заголовка, которое скользит вниз, когда вы перемещаете мышь в окне браузера.

Но я хочу, чтобы он скользил после того, как мышь не двигалась в течение 5 секунд.

Вот что у меня есть: http://jsfiddle.net/BEzbw/

Ответы [ 3 ]

1 голос
/ 22 октября 2011

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).

0 голосов
/ 22 октября 2011

Как то так? 

$(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 голосов
/ 22 октября 2011

попробуйте

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

может потребоваться время, хотя

...