Change class on jquery tab rotate change?

Question

I am using jQuery and JQUI to to do a "featured slider" on my website here: http://calibur.8wayrun.com/

It uses code such as the following (I've edited out all the non-essential information, as its just here as a quick summary of what I'm doing).

<script type="text/javascript">
jQuery(document).ready(function() {
    $("#recentSlider2").tabs({
        fx:{opacity: "toggle"}
    }).tabs("rotate", 5000, true);
});
</script>

<div id="recentSlider2">
    <div class="recentSlider2 rightSlider">
        <div id="fragment-1"></div>
        <div id="fragment-2"></div>
        <div id="fragment-3"></div>
            etc...
        <ul>
            <li id="nav-fragment-1"></li>
            <li id="nav-fragment-2"></li>
            <li id="nav-fragment-3"></li>
                etc...
        </ul>
    </div>
</div>

Simple right? Well if you notice, the parent div class is "recentSlider2 rightSlider". On every tab change, I would like the slider to replace "rightSlider" with "leftSlider", and replace "leftSlider" with "rightSlider". This would be there just to simulate a bounce from left to right with each slide change.

Is something like this possible? and if so, how would I do it?

Answer 1

You should just be able to bind to the tabsselect event:

$("#recentSlider2").bind('tabsselect', function(event, ui) {
      $(ui.tab).closest(".recentSlider2")
          .toggleClass("rightSlider")
          .toggleClass("leftSlider");
  });