Jquery：隱藏頂部菜單，在暫停的鼠標移動時滑動

我正在創建一個標題菜單，當您在瀏覽器窗口中移動鼠標時，它向下滑動。Jquery：隱藏頂部菜單，在暫停的鼠標移動時滑動

但是我想讓它在鼠標沒有移動5秒後滑動。

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

試試這個

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

可能需要上雖然

來源

2011-10-22 00:57:57

這與我所需要的很接近，但即使您在頁面上移動鼠標，標題也會反彈。只有當鼠標停止移動時，標題才能向上滑動。 – floatleft

像這樣的時機工作？

$(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：隱藏頂部菜單，在暫停的鼠標移動時滑動

回答

相關問題