CODEWITHSUNDEEP
jquerymousemove
floatleft
floatleft

Reputation: 6541

Jquery: Hidden top menu, slide up on paused mouse movement

I'm creating a header menu that slides down when you move the mouse within in the browser window.

But I want to have it slide up after the mouse hasn't moved for 5 seconds.

Here is what I have so far: http://jsfiddle.net/BEzbw/

Upvotes: 0

Views: 759

Answers (3)

Sinetheta
Sinetheta

Reputation: 9429

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

Upvotes: 1

Marco Johannesen
Marco Johannesen

Reputation: 13134

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

});

Upvotes: 0

Last Rose Studios
Last Rose Studios

Reputation: 2481

give this a try

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

might need to work on the timing though

Upvotes: 0

Related Questions