2

我需要为下拉菜单的 mouseover 事件添加延迟，这样如果有人将鼠标悬停在菜单上并转到页面上的另一个链接，则菜单不会立即下拉。谢谢你的帮助。

http://jsfiddle.net/cgagliardi/NPVVQ/

4

3 回答 3

4

您可以添加一个setTimeout()来延迟show()，并在悬停时清除超时，这样如果用户在延迟结束之前将鼠标移出，它将被取消。您可以将其封装在您自己的 jQuery 插件中：

jQuery.fn.hoverWithDelay = function(inCallback,outCallback,delay) {
    this.each(function(i,el) {
        var timer;
        $(this).hover(function(){
           timer = setTimeout(function(){
              timer = null;
              inCallback.call(el);
           }, delay);
        },function() {
           if (timer) {
              clearTimeout(timer);
              timer = null;
           } else
              outCallback.call(el);
        });
    });
};

您可以像这样使用它：

$('ul.top-level li').hoverWithDelay(function() {
    $(this).find('ul').show();
}, function() {
    $(this).find('ul').fadeOut('fast', closeMenuIfOut);
}, 500);

我匆忙拼凑了那个插件，所以我确信它可以改进，但它似乎在你的演示的这个更新版本中工作：http: //jsfiddle.net/NPVVQ/3/

至于解释我的代码是如何工作的：.each()循环遍历调用函数的 jQuery 对象中的所有元素。对于每个元素，都会创建一个悬停处理程序，用于setTimeout()延迟调用所提供的回调函数 - 如果 mouseleave 在时间结束之前发生，则清除此超时，以便inCallback不调用。该.call()方法用于inCallback和outCallback为 设置正确的值this。

于 2012-05-29T04:25:40.133 回答
0

您可以使用 CSS3 动画或过渡。

http://www.css3maker.com/css3-animation.html

http://www.css3maker.com/css3-transition.html

或者您可以在 Javascript 中处理超时，我认为一种简单的方法是附加一个setTimeoutbeforeshow();并clearTimeout在 mouseleave 事件上使用

于 2012-05-29T04:11:51.257 回答
0

我更新了代码，现在您的菜单在1/2 秒后出现。 演示

$('#navigation').show(2000);

这足以延迟jquery中的动画....of show()。

我只是用另一个 div 来暂停你可以看到的动画。

于 2012-05-29T04:29:56.733 回答