Question

我有这个代码，使菜单项向下和向上滑动。我想添加一个计时器，因此滑动延迟然后备份。

$(function () {
    $("#menu").find("li").each(function () {
        if ($(this).find("ul").length > 0) {
            $(this).mouseenter(function () {
                $(this).find("ul").stop(true, true).slideDown();
            });
            $(this).mouseleave(function () {
                $(this).find("ul").stop(true, true).slideUp();
            });
        }
    });
});

Answer 1

看起来你正在用jQuery编写javascript

jQuery有一个用于动画队列的内置.delay函数。

在您的示例中，将滑动动画延迟300毫秒看起来像

$(this).find("ul").stop(true, true).delay(300).slideDown();

请参阅jQuery's delay

Answer 2

智能方法是在触发mouseleave之前将悬停意图添加到等待：

jsBin demo

$("#menu").find("li:has(ul)").on('mouseenter mouseleave',function( e ){
     var $UL = $(this).find('ul');
     if(e.type==='mouseenter'){
          clearTimeout( $(this).data('wait') );
          $UL.stop(1,1).slideDown();
     }else{            
          $(this).data('wait', setTimeout(function(){
              $UL.stop().slideUp();
          },180) );     
     } 
});

而不是使用if ($(this).find("ul").length > 0) {，只需使用：("li:has(ul)")
来仅在拥有 li的{{1}}个元素上触发您的活动孩子。
为ul添加事件回调e。
如果mouseenter mouseleave事件== e ..... mouseenter为else。
清除名为“等待”的mouseleave属性，并将子项{slide}命名为data
现在，离开原始ul元素到达'遥远'li我们必须越过一个空格（演示），通常会立即触发' slideUp（）'，但是我们在ul的数据属性中设置了一个超时计数器，它将在运行前等待〜180ms。
到达'远程'li元素 - 为时间'li'的子项，我们清除超时（步骤1）'保留'鼠标中心状态。

使用~180ms或您认为需要多少鼠标才能达到“远程”UL元素

如何添加延迟计时器？

2 个答案:

jsBin demo