I currently have a jQuery EasyTabs plugin setup here. Right now the transitionin/out effect is to FadeIn and FadeOut. I'm trying to have it so that it slides on transition. For example, when you click on a link, when the tab is expanded, the content that is current there moves to the left, while the new content moves in from the right.

I now that I need to modify the transitionIn and transitionOut options, but I think I need to give it something custom since slideLeft, slideRight isn't supported by default.

Here's the plugin site .

Here is my javascript
Code:
  $(document).ready( function() {
				$('#tab-buttons-container').easytabs({
				  collapsible: true, 
				  collapsedByDefault: true,
				  transitionIn: 'slideLeft',
  				  transitionOut: 'slideRight',	
				  updateHash: false
				});
				
				var $tabContainer = $('#tab-buttons-container'),
					$tabs = $tabContainer.data('easytabs').tabs,
					$tabPanels = $(".tab-buttons-panel")
					totalSize = $tabPanels.length;
			  });
and my html

HTML Code:
<div id="tab-buttons-container" class='tab-container'>
				 			<ul class='etabs'>
<li id="menu-item-240" class="tab menu-item menu-item-type-custom menu-item-object-custom menu-item-240"><a href="#tab1">About</a></li>
<li id="menu-item-241" class="tab menu-item menu-item-type-custom menu-item-object-custom menu-item-241"><a href="#tab2">Committees</a></li>
<li id="menu-item-242" class="tab menu-item menu-item-type-custom menu-item-object-custom menu-item-242"><a href="#tab3">Events</a></li>
<li id="menu-item-243" class="tab menu-item menu-item-type-custom menu-item-object-custom menu-item-243"><a href="#tab4">Grants & Support</a></li>
<li id="menu-item-244" class="tab menu-item menu-item-type-custom menu-item-object-custom menu-item-244"><a href="#tab5">Knowledge Base</a></li>
<li id="menu-item-245" class="tab menu-item menu-item-type-custom menu-item-object-custom menu-item-245"><a href="#tab6">Blog</a></li>
<li id="menu-item-246" class="tab menu-item menu-item-type-custom menu-item-object-custom menu-item-246"><a href="#tab7">Forum</a></li>
<li id="menu-item-247" class="tab menu-item menu-item-type-custom menu-item-object-custom menu-item-247"><a href="#tab8">Support</a></li>
					 		</ul>
					 	<div class="panel-container">
					  		<div id="tab1" class="tab-buttons-panel">
					   			
					   			<h2>Heading 1</h2>
					  			<p>This is the content of the first tab.</p>
					  		</div><!-- /tab1-->
					  		<div id="tab2" class="tab-buttons-panel">
					   			
					  			<h2>Heading 2</h2>
					   			<p>Stuff from the second tab.</p>
					  		</div><!-- /tab2-->
					  		<div id="tab3" class="tab-buttons-panel">
					   			
					   			<h2>Heading 3</h2>
					   			<p>More stuff from the last tab.</p>
					  		</div><!-- /tab3-->
					  		<div id="tab4" class="tab-buttons-panel">
					  		 	
					  		 	<h2>Heading 4</h2>
					  		 	<p>More stuff from the last tab.</p>
					  		</div><!-- /tab4-->
					  		<div id="tab5" class="tab-buttons-panel">
					  		 	
					  		 	<h2>Heading 5</h2>
					  		 	<p>More stuff from the last tab.</p>
					  		</div><!-- /tab5-->
					  		<div id="tab6" class="tab-buttons-panel">
					  		 	
					  		 	<h2>Heading 6</h2>
					  		 	<p>More stuff from the last tab.</p>
					  		</div><!-- /tab6-->
					  		<div id="tab7" class="tab-buttons-panel">
					  		 	
					  		 	<h2>Heading 7</h2>
					  		 	<p>More stuff from the last tab.</p>
					  		</div><!-- /tab7-->
					  		<div id="tab8" class="tab-buttons-panel">
					  		 	
					  		 	<h2>Heading 8</h2>
					  		 	<p>More stuff from the last tab.</p>
					  		</div><!-- /tab3-->					  		
						</div><!-- /panel_container-->
					 </div><!-- /tab-container -->
Any suggestions?