Using hover and click with jQuery UI tabs?

Question

I am using the following code for my jQuery UI tabs:

$('#tabs').tabs({
    fx: { opacity: 'toggle', duration: 400 }}).tabs('rotate', 1000);
$("#tabs").hover(function() {
    $("#tabs").tabs("rotate",0);
},

function() {
    $("#tabs").tabs("rotate",1000);
});

$("#tabs").click(function() {
    $("#tabs").tabs('rotate', 0);
});

The tabs are rotating properly and the rotation stop when hovering with the mouse. However, the 'hover' function is also overriding the 'click' function. How can I achieve a pause when hovering, and a complete stop to the rotation on click?

Answer 1

Try this

$('#tabs').tabs({ 
    fx: { opacity: 'toggle', duration: 400 }
}).tabs('rotate', 1000);

$("#tabs").hover(
    function() {
        $("#tabs").stop();
    },
    function() {
        $("#tabs").tabs("rotate",1000);
    }
);

$("#tabs").click(
    function() {
        $("#tabs").stop(true);
    }
);

Answer 2

just a week ago i looked for the same issue. Now i created an extesion: Pause on Hover for jQuery UI Tabs Rotate