Javascript Scroll Menu - MouseOver Selection not working correctly on first contact

Question

Hi,

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.

$(document).ready(function() {

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

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

$("#featured > ul").mouseout(function() {
    $(this).tabs("rotate", 1000);
})
});

At the moment the when MouseOver the cycle stops but does not select the correct item, once I mouseOut then MouseOver again the functionality works perfectly! My issue lies where on first mouseOver the code doesnt seem to be loading correctly?

Any ideas? Help will be really appreciated.

Thanks again for your time..

Answer 1

Try this:

$("#featured > ul").mouseover(function() {
    $(this).tabs("abort");
    $(this).tabs({ event: 'mouseover', fx: { opacity: "toggle"} }).tabs("rotate", 0);
    $(this).tabs("select", this.id); 
});