Question

I have used jQuery tabs for a carousal, but I need to have control button like, Play and Pause. Following are my controls.

<p id="carusalSwitch">Autoplay 
  <span class="on">On</span> | <span class="off">Off</span>
</p>

Then page loaging, tab animation is paused(stop), by button interaction, it can be played and vice-versa. Following is the query code,

// when loaded carousal is paused, off text is change to bold
$('#carusalSwitch .off').css('fontWeight','bold');

// when user click on "ON" link
$('#carusalSwitch .on').click(function() {
$('#featured > ul').tabs({fx:{opacity: 'toggle'}}).tabs('rotate', 3000, true);
    $(this).css('fontWeight','bold');
$('#carusalSwitch .off').css('fontWeight','normal');
});

// when user click on "OFF" link        
$('#carusalSwitch .off').click(function() {
$('#featured > ul').tabs();
     $(this).css('fontWeight','bold');
$('#carusalSwitch .on').css('fontWeight','normal');
}); 

When you click on “ON” link, animation starts, but when “off” clicked, animation still continue.
What could be the mistake?

Even I tried adding following code,

$('#featured > ul').tabs().clearQueue().stop();

but no luck.

Answer 1

$('#featured > ul').tabs('rotate', null, true);

When I use as above, it works fine.