jQuery UI选项卡在鼠标hover时更改选项卡之前强制延迟

使用jQuery UI选项卡1.7.2和jQuery 1.4.2，有没有办法使鼠标hover在选项卡上，在选项卡切换之前有一段延迟？

我一直在研究使用hoverIntent插件来做到这一点，但无法弄清楚它是如何适应的。

现在我的代码看起来像：

var tabs = $('.tabs').tabs({ event: 'mouseover' }); 

我已经尝试过在show事件中使用回调，但我认为我在回调发生时做错了或不清楚：

 $( ".tabs" ).tabs({ show: function(event, ui) { setTimeout("FUNCTION_TO_CHANGE_TAB?", 200); } }); 

任何帮助将不胜感激。

Answer 1

由于您使用的是1.4.2，因此您可以使用自定义事件和.delegate()来执行此操作：

 $("#tabs").tabs({ event: 'mousedelay' }).delegate('ul.ui-tabs-nav li a', 'mouseover', function() { clearTimeout($(this).closest('.ui-tabs').data('timeout')); $(this).closest('.ui-tabs').data('timeout', setTimeout($.proxy(function() { $(this).trigger('mousedelay'); }, this), 500)); });​​​​​​​​​​​​​​​ 

你可以在这里试一下

这可以通过设置event选项来侦听我们的自定义事件mousedelay 。 然后在.delegate() ，我们正在监听锚点上的mouseover事件，如果有锚点则清除超时（我们快速hover2个标签），然后设置另一个。 当超时结束时，我们正在做的就是在该锚点（选项卡）上触发mousedelay事件。

$.proxy()片段只是一个简短的方法，可以this引用我们moused-over的锚点，而不是window （因为setTimeout()在全局上下文中运行）。

Answer 2

您可以创建自己的事件，覆盖鼠标hover并触发新事件。

我在这里发现了一篇关于它的博客文章