2

我有这段代码可以让菜单项向下和向上滑动。我想添加一个计时器，以便向下滑动然后向后滑动有延迟。

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

2 回答 2

4

看起来你正在用 jQuery 编写 javascript

jQuery 有一个内置.delay的动画队列功能。

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

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

查看jQuery 的延迟

于 2012-07-08T19:32:37.787 回答
0

一个聪明的方法是在触发 mouseleave 之前添加一个悬停意图等待：

jsBin 演示

$("#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) {仅使用 use:仅在具有子元素的元素("li:has(ul)")
    上触发事件。li ul
  • 为. e_mouseenter mouseleave
  • 如果e事件 == mouseenter.....else是mouseleave.
  • 比清除data名为“等待”的属性并向下滑动孩子ul
  • 现在，让原始li元素到达“远处”，ul我们必须跨越一个空白（演示），这通常会立即触发“slideUp（）”，但我们在该li数据属性中设置了一个超时计数器，它将等待运行前约 180 毫秒。
  • 到达'distant'ul元素——作为超时'li'的子元素，我们清除超时（步骤1）'保持'mouseenter状态。

使用约 180 毫秒或您认为用鼠标到达“远处”UL 元素所需的时间

于 2012-07-08T19:51:24.743 回答