Question

我目前正在制作带有标签的两级菜单动画：主菜单标签项打开标签子菜单。

在加载时，根据当前页面位置打开默认子菜单。用户可以选择打开其他子菜单以浏览导航。但是，当用户不再关心菜单时，默认子菜单应在一段时间后重新出现以匹配当前位置。此代码适用于此用途：

$("#menu").mouseleave(function(){
    setTimeout(function(){
        $("#menu").tabs( "option", "selected", index );},
        2000);
        });
    });

这是问题所在。如果用户在启动超时后返回菜单（延迟2秒），则无论如何都会显示默认子菜单，这可能会影响用户体验。当用户返回菜单时停止超时会很棒。

我认为最好使用Queue，Delay ...但我不知道怎么做，因为大多数文档都是指动画排队...

感谢您的帮助......

Answer 1

您可以使用clearTimeout停止启动超时，如下所示：

var menuTimeOut;
$("#menu").mouseleave(function(){
 menuTimeOut = setTimeout(function(){
    $("#menu").tabs( "option", "selected", index );},
    2000);
    });
});
$("#menu").mouseenter(function(){
  if(menuTimeOut) { 
     clearTimeout(menuTimeOut);
  }
});

Answer 2

当鼠标进入菜单时，您不需要使用队列来取消计时器。您可以调用clearTimeout()来执行此操作，并使用jQuery的data()工具存储超时标识符：

$("#menu").mouseleave(function() {
    $(this).data("timeout", window.setTimeout(function() {
        $("#menu").tabs("option", "selected", index);
    }, 2000));
}).mouseenter(function() {
    var timeout = $(this).data("timeout");
    if (timeout) {
        window.clearTimeout(timeout);
        $(this).removeData("timeout");
    }
});

队列，延迟，停止队列

2 个答案: