добавить задержку для этого jquery при наведении

Question

Я использую этот код:

var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function navBar_open()
{  navBar_canceltimer();
   navBar_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function navBar_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function navBar_timer()
{  closetimer = window.setTimeout(navBar_close, timeout);}

function navBar_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('#navBar > li').bind('mouseover', navBar_open) //mouseover
   $('#navBar > li').bind('mouseout',  navBar_timer)}); //mouseout

document.onclick = navBar_close;

который отлично работает

я бы хотел добавить задержку для события наведения мыши

Я буду честен, я нашел этот код на другом сайте и не совсем понимаю, как он работает.

Я понимаю, что когда пользователь отключается, вызывается функция navBar_timer, которая добавляет некоторую задержку, прежде чем раскрывающееся меню снова скрывается, но я не совсем понимаю, как реализовать наведение на курсор мыши. *

Любое руководство будет оценено.

спасибо

Answer 1

Какую версию Jquery вы используете? Если вы используете новую (1.4), вы сможете использовать новую функцию $.delay(). Тогда все, что вам нужно изменить, это одна строка в пределах navBar_open() на:

ddmenuitem = $(this).find('ul').delay(timeout).css('visibility', 'visible');

Answer 2

Примерно так будет работать с jquert 1.4 и выше. Нет необходимости в плагине hoverIntent:

$("#yourdiv").hover(function(){
    $(this).stop(true).delay(400).animate({"height":"300px"},800, "easeOutBounce");
},function(){
    $(this).stop(true).animate({"height":"25px"}, 300, "easeOutBack");
});

просто добавьте функцию задержки после элемента остановки. Если вы наводите курсор на элемент, он ждет 400 мс, прежде чем развернуть меню. Если вы переместите мышь из элемента до 400 мс, меню не откроется.

Answer 3

это то, что вы ищете ... нажмите http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 4

Попробуйте изменить это:

$(document).ready(function()
{  $('#navBar > li').bind('mouseover', navBar_open) //mouseover
   $('#navBar > li').bind('mouseout',  navBar_timer)}); //mouseout

К этому:

$(document).ready(function() {
    $('#navBar > li').hover(function() {
        closeHoverTimer = window.setTimeout(navBar_open, 500); //500ms timeout);
    }, function() {
        navBar_timer();
        window.clearTimeout(closeHoverTimer);
    });
});

Answer 5

Это также должно работать:

    $('#navBar > li').hover(
        function() {
            var newthis = $(this);
            timer = setInterval(function() {showTip(newthis)}, delay);
        },
        function() {
            clearInterval(timer);
            $(this).find('ul:visible').fadeOut(speed);
        },
        showTip = function(newthis) {
            clearInterval(timer);
            newthis.find('ul:hidden').fadeIn(speed);
        }
    );  

Answer 6

Я повторяю рекомендацию Рейгеля использовать плагин hoverIntent. Чтобы задержать другие функции jquery, я склонен использовать эту функцию:

  var delay = (function(){
    var timer = 0;
    return function(callback, ms){
      clearTimeout (timer);
      timer = setTimeout(callback, ms);
    };
  })();

И назовите это:

delay (function () {
    // add whatever function you want delayed by 2 secs
}, 2000);