I have 3 tabs that I am rotating using the following:
var $rotate = $('#rotate');
$rotate.tabs({fx: {opacity: "toggle", duration: "fast"},event:'mouseover'})
.tabs('rotate', 4000);
The problem is that when I mouse over all of the links fast, the tabs animation hiccups, revealing the hidden images which just sit there on top of each other.
I have an ugly work around, but there must be a better solution. Here is the work around:
var $rotateCopy = $rotate.clone(); //Duplicate the first rotate element
// Once a user triggers mouseover event, remove original tabs section
// and replace it with 'tabs' without the rotating animation
$('#rotate li a').mouseover(function(){
$rotate.remove(); //Destroy the original rotate element
$rotateCopy.prependTo("#body").tabs({event: 'mouseover'});
});
Any ideas?