jQuery UI Tabs force delay before changing tab on mouseover

Question

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({
 event: '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.

Answer 1

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

I found a blog post about it here

Answer 2

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.

Answer 3

Hi Nick, thanks for your answer. That worked great.

Is there anyway that you can also add a click event to the tabs, in addition to the switching on hover (with delay)? Not sure how I would go about this...

Thanks!