将延迟添加到悬停时的jquery

我正在使用以下代码：

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函数，这会在下拉菜单再次隐藏之前增加一些延迟，但我不太明白如何在鼠标上方实现悬停

如有任何指导，将不胜感激

---

谢谢你尝试改变这个：

$(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);
    });
});

    $('#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);
        }
    );  

对此：

$(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);
    });
});

    $('#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);
        }
    );  

---

您使用的Jquery版本是什么？如果您使用的是新的（1.4），您应该能够利用新的

$.delay（）

函数。然后您只需将

navBar\u open（）

中的一行更改为：

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

---

这就是你要找的。。。单击第二个Reigel建议使用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);

---

这也应该有效：

$(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);
    });
});

    $('#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);
        }
    );  

---

类似这样的东西可以在jquert1.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毫秒时间段之前将鼠标移出元素，菜单将不会打开。

这是有道理的，但不幸的是，它完全破坏了悬停效果。谢谢您的时间