jQuery UI Tabs force delay before changing tab on mouseover

Using the jQuery UI Tabs 1.7.2 with jQuery 1.4.2, is there a way to make it so that when you mouseover a tab, there is a delay before the tab switches?

I've been looking into using the hoverIntent plugin to do this, but cannot figure out how it would fit in.

Right now my code looks like:

var tabs = $('.tabs').tabs({
 ev开发者_如何转开发ent: 'mouseover'
});

I've tried playing around with a callback on the show event, but I think I'm doing it wrong or not clear on when the callback happens:

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

Any help would be greatly appreciated.

Since you're on 1.4.2 you can use a custom event and .delegate() to do this:

$("#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));
});​​​​​​​​​​​​​​​

You can try a demo here

This works by setting the event option to listen for our custom event, mousedelay. Then in .delegate(), we're listening for the mouseover event on the anchors, clearing a timeout if there is one (we hovered over 2 tabs rapidly), and setting another. When that timeout finishes all we're doing is triggering the mousedelay event on that anchor (the tab).

The $.proxy() piece is just a short way to have this reference to the anchor we moused-over, not window (since setTimeout() runs in a global context) when it executes.

You can create your own event, override the mouseover and trigger a new event.

I found a blog post about it here