Jquery задерживается css div div

Question

Я пытаюсь частично скрыть строку меню после истечения 5 секунд бездействия. Меню расположено в 20px от верхней части страницы, и основная идея состоит в том, что небольшая часть меню все еще будет видна после того, как она переместится вверх, чтобы позволить пользователю навести на нее курсор, чтобы он снова выпал (возможно, это приведет к смысл!).

Я справился со стороной анимации, но не совсем тайм-аут. Есть идеи?

Answer 1

К сожалению, в jQuery нет функции задержки. Тем не менее, вы можете использовать хитрый и не слишком грязный хак для имитации задержки, анимируя прозрачность элемента от 1 до 1:

$('#visibleElement')               // Assuming the element is already shown
  .animate({opacity: 1.0}, 3000);  // do nothing for 3 seconds

Чтобы сдвинуть меню через 5 секунд после того, как мышь отпустит, вы можете сделать следующее:

$('#menuDiv').mouseout(function(){
  .animate({opacity: 1.0}, 5000)
  .animate( slide up etc...
});

Answer 2

Попробуйте посмотреть на HoverIntent. http://cherne.net/brian/resources/jquery.hoverIntent.html

Это позволяет довольно легко выполнять действия с задержкой после того, как пользователь перестал взаимодействовать с вашим меню.

Answer 3

Вы должны использовать mouseout событие div, которое представляет меню для реализации функции, подобной этой:

var waitingForMenuToHide = false;

function myOnMouseOut() {
    waitingForMenuToHide = true;
    setTimeout(function() {
        if (waitingForMenuToHide) {
            // Hide the menu div...
        }
    }, 5000);
}

и событие mouseover для сброса переменной waitingForMenuToHide:

function myMouseOver() {
    waitingForMenuToHide = false;
}

Answer 4

При событии mouseout запустите тайм-аут с обратным вызовом для прокрутки элемента вверх. В случае mousover, если есть тайм-аут, убейте его, используя:

clearTimeout(timer); 

Так что это будет что-то вроде:

var timer;
$('mybar').mouseover(function(){clearTimeout(timer);/* Animate down code here */});
$('mybar').mouseout(function(){timer=setTimeout(function(){/* Animate up Code Here */}, 5000);});