Question

我正在网站上工作，想要修改下拉菜单项的当前代码。这是当前的代码：

$(document).ready(function () { 

$('#nav li').hover(
    function () {
        //show its submenu
        $('ul', this).slideDown(300);

    }, 
    function () {
        //hide its submenu
        $('ul', this).slideUp(300);         
    }
);

});

我尝试更改代码以添加超时，以便在用户将鼠标从菜单中移开时设置超时，这样菜单就不会立即切换滑动效果。我想要的效果是，如果用户将鼠标从菜单上移开200毫秒，然后将其移回菜单则不会执行任何操作。因此菜单等待300-400 ms来切换滑动功能。这是我写的代码不起作用。部分原因是this $('ul', this).slideUp(250);中的$(document).ready(function () { var timeoutID; $('#nav li').hover( function () { //show its submenu $('ul', this).slideDown(250); window.clearTimeout(timeoutID); timeoutID = window.setTimeout(SlideUp, 350); }, ); function SlideUp() { //hide its submenu $('ul', this).slideUp(250); } });无论如何，这是我试图实现的代码无效：

{{1}}

让程序等待切换滑动功能的最佳方法是什么？任何想法都值得赞赏。感谢。

Answer 1

这就是你想要做的。

$(document).ready(function () { 
  var timeout;
  $('#nav li').hover(function () {
    //show its submenu
    clearTimeout(timeout);
    $('ul', this).slideDown(300);
  }, function () {
    //hide its submenu
    var self = this;
    timeout = setTimeout(function(){
      $('ul', self).slideUp(300);         
    }, 300);
  });
});

Answer 2

jQuery.Deferred（），在1.5版中引入，是一个可链接的实用程序可以将多个回调注册到回调队列的对象，调用回调队列，并中继任何成功或失败状态同步或异步功能。

看看this。

Answer 3

不是您具体问题的答案，但我会尽可能使用transition-delay，fiddle。

将超时添加到下拉菜单不起作用

3 个答案: