Меню скользящего Nav в верхней части страницы - JQuery

Question

Привет, я новичок в jQuery, и я ищу, чтобы скрыть мое меню навигации в верхней части страницы через определенное время. Вероятно, около 3/4 секунды пользователь находится на странице. Я, вероятно, добавлю кнопку со стрелкой, чтобы вывести меню после того, как он соскользнул с страницы, но пока мне просто нужно знать, как его перемещать вверх и вниз. Я думаю, мне, возможно, придется внести поправки в мой CSS, чтобы сделать эту работу тоже.

Любая помощь, наносимая советами, будет оценена по достоинству.

Смотрите мне jsFiddle для более подробной информации: http://jsfiddle.net/headex/tJNXD/

Answer 1

Я хотел бы сделать это таким образом:

Первый, я использую здесь селектор $(nav) но вы можете адаптировать его к коду первым. Кроме того, вам нужно будет поставить меню: position: relative; ИЛИ position: absolute;

Чтобы сделать это выскользнуть:

$(nav).animate({"top":$(nav).height() * -1},"slow"); 

Чтобы сделать это слайд в:

$(nav).animate({"top":0},"slow"); 

Если вы хотите сделать, это popout Через 3 секунды, здесь мы идем:

function MenuOut() 
{ 
    /* The sample code I put on top */ 
    $(nav).animate({"top":$(nav).height() * -1},"slow"); 
} 

и вы положили это на странице Js:

/* This will run once the document is ready */ 
$(function() 
{ 
    setTimeout("MenuOut",3000); /* 3000 represent 3000 milliseconds, so 3 seconds */ 
}); 

Теперь кнопку:

function MenuIn() 
{ 
    $(nav).animate({"top":0},"slow"); 
} 

и вам привязать его к кнопке, как так:

$('#theButton').on(
{ 
    click: function() 
    { 
     /* Hide the button, and then show up the menu */ 
     $(this).animate({"top":$(this).height() * -1},"slow",function() 
     { 
      /* I putted this in a callback function, so the 2 animations will be one after the other, not at the same time ! */ 
      MenuIn(); 
     }); 
    } 
}); 

Answer 2

Хорошо, прежде всего, в вашей загруженной jsfiddle ссылке вы не загружали jquery, который вы загружали Mootools. Так что jQuery, который вы хотите использовать, исправить?

Если да, то вы могли бы использовать что-то вроде этого ...

var timeout = null; 

$('#masterNav').hover(function() { 
    clearTimeout(timeout); 
}, function() { 
    timeout = setTimeout('$("#nav").slideUp(500)', 750); 
});