Question

我有一个列表项，当它悬停在另一个内部列表上滑动时。我遇到的问题是，如果你不小心将它快速地悬停在它上面，它会向下滑动，有时甚至会在一个奇怪的循环中停留，它会在关闭和打开之间反弹。我的解决方案是在显示它之前稍微延迟。

 $('#overlayNav li').hover(
     function() {
         var that = this;
         setTimeout(function(){test(that)},1000);
         function test(param) {
             if(param.id) {
                 $(param).find('ul').slideDown({easing: "easeOutBounce", duration: 900});
             }
         },

问题是所有这些代码都延迟了幻灯片。即使你像以前一样悬停了几分之一秒，仍然可以检测到悬停...唯一的区别是它现在有一个延迟显示......如果鼠标仍然结束，我需要说的是超时之后该元素然后显示它。我该怎么做？

Answer 1

http://cherne.net/brian/resources/jquery.hoverIntent.html

简单地说，最好的解决方案......：）

Answer 2

您所要做的就是跟踪计时器（通过元素的data），并在悬停时将其清除：

$('#overlayNav li').hover(
     function() {
         var that = this;

         /*** Here! ***/
         $(this).data('timer', setTimeout(function(){test(that)},1000));

         function test(param) {
             if(param.id) {
                 $(param).find('ul').slideDown({
                     easing: "easeOutBounce", duration: 900
                 });
             }
         }
     },
     function () {

         /*** And here! ***/
         var timer = $(this).data('timer');
         if (timer) $(this).data('timer', clearTimeout(timer));

     }
});

只有在它被徘徊一段时间后显示菜单项

2 个答案: