views:

123

answers:

0

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?