JQuery Tabs UI - Menu rotation - OnMouseOver and OnMouseOut

Question

I am currently working with a tab menu which cycles through automatically. Once I mouseover one of the tabs the "rotation" should stop on the selected tab and when I mouseout it should continue rotating from the selected tab item.

$("#featured > ul").tabs({ 
                     event: 'mouseover', 
                     fx: { opacity: "toggle"} })
                   .tabs("rotate", 10000, true);

At the moment the onmouseover selects the correct tab but it keeps rotating.

I have been stuck on this for AGES so any help would be really appreciated.

Thanks for your time..

Answer 1

You can stop rotation by setting the first argument to 0 or null :

.tabs("rotate", 0);

So I would imagine that you can simply do that on mouseover , and reset back to your defaults on mouseout :

$("#featured > ul").mouseover(function() {
    $(this).tabs("rotate", 0);
}).mouseout(function() {
    $(this).tabs("rotate", 10000, true);
});