Jquery：非表示のトップメニュー、一時停止したマウスの動きでスライドする

ブラウザウィンドウ内でマウスを動かすとスライドするヘッダーメニューを作成しています。Jquery：非表示のトップメニュー、一時停止したマウスの動きでスライドする

しかし、マウスが5秒間動かないうちにスライドさせたいと思っています。 http://jsfiddle.net/BEzbw/

2011-10-22 floatleft

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-22 01:25:48 Sinetheta

がこのような

出典

2011-10-22 00:57:57

これは私が必要とするものに近いですが、マウスをページの周りに移動しても、ヘッダーがバウンスします。ヘッダーは、マウスの移動が停止したときにのみ上にスライドします。 – floatleft

何かかかわらタイミングで作業する必要があるかもしれません

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

を試してみる：ここ

は、私がこれまで持っているものでしょうか？

$(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-22 01:03:32

これは非常に近いですが、スライドアップは発射していないようです。上記のコードは次のとおりです：http://jsfiddle.net/FAtUw/ – floatleft

Jquery：非表示のトップメニュー、一時停止したマウスの動きでスライドする

答えて

関連する問題