Question

I’ve implemented jQueury UI tabs.

If you move over them too quickly, the tab where the mouse is currently on, doesn’t activate.

I’ve done a jsFiddle below which sort of demonstrates this.
The problem is more emphatic on the site because of the amount of Javascript running concurrently. Is there a way to make the current tab activate based on different events without customizing the jQuery-UI code?

It is CDN and part of a larger framework.

Fiddle

Answer 1

Change your duration from a string (‘fast’) to an integer representing the delay you want. The integer value represents the number of milliseconds the transition should take.

jsFiddle example

$(".tabs").tabs({
    event: "mouseover",
    fx: {
        opacity: 'toggle',
        duration: 1
    }
});

From the docs:

The duration option can be a string representing one of the three
predefined speeds (“slow”, “normal”, “fast”) or the duration in
milliseconds to run an animation (default is “normal”).