JQuery задержал позицию CSS div

Question

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

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

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 запустите таймаут с обратным вызовом для прокрутки элемента вверх.В событии наведения курсора мыши, если есть тайм-аут, уничтожьте его, используя:

clearTimeout(timer); 

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

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