队列，延迟，停止队列

我目前正在制作带有选项卡的两级菜单动画：主菜单选项卡项目打开选项卡式子菜单。队列，延迟，停止队列

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

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

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

我认为这将是更好地使用队列，延迟...但我不知道如何，因为大多数的文件是指动画排队做...

感谢您的帮助.. 。

来源

2011-01-25 Yako

您可以停止启动暂停时以clearTimeout，就像这样：

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

来源

2011-01-25 12:09:11

谢谢您的回答！ – Yako 2011-01-27 09:53:03

感谢您的回答！但mouseenter事件似乎并没有奏效。我不知道为什么...... – Yako 2011-01-27 10:14:08

你并不真的需要使用队列，当鼠标进入菜单取消计时器。您可以拨打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"); 
    } 
});

来源

2011-01-25 12:10:25

队列，延迟，停止队列

回答

相关问题