Adding Slide Left / Right to Transition effect in EasyTabs

JavaScript
1

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


  $(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

<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?

2

Hi,

I managed to get it to work using some components from jQueryUI - I don’t know if you want to go that route, as it does add about 17kb of extra JS to your page. Someone else here probably knows a better way to do this.

First include these JS files in your page:


<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>

and add this javascript (can be in an external files, as long as you load it before you initialise EasyTabs):


jQuery.fn.extend({
      slideRightShow: function(duration, easing, fn) {
        return this.each(function() {
            $(this).show('slide', {direction: 'right'}, 1000, fn);
        });
      },
      slideLeftHide: function(duration, easing, fn) {
        return this.each(function() {
          $(this).hide('slide', {direction: 'left'}, 1000, fn);
        });
      }
    });



$('#tab-buttons-container').easytabs({
    collapsible: true,
    collapsedByDefault: true,
    transitionIn: 'slideLeftHide',
    transitionOut: 'slideRightShow',	
    updateHash: false
});