Custom jQuery Tools Tab transitions

Todays challenge was to alter the transferring of tabs from in jQuery tools, I wanted a side bar I had positioned Outside the tabs to only be shown on one tab, the solution I came up with was to create a custom effect which you then use as the effect when initialising the tab.

$.tools.tabs.addEffect("subFade", function(tabIndex, done) {
	var conf = this.getConf(),
            	speed = conf.fadeOutSpeed,
		panes = this.getPanes();
	var $tab = this.getCurrentTab();
	if($tab.attr("id") == "wanted"){//Going AWAY from the tab, do hide animation (before the tab is hidden)
		$("ul.tabs.summaries").animate({"left" : "0px"}, 300, function(){//I was sliding it behind the tabs when not in use, replace with your own animation
			panes.hide();
			panes.eq(tabIndex).fadeIn(200, done);
			//This is then end of the chain - my animation, hide all then fade in new tab.
		});
	}else{//going away from any other tab
		panes.hide();
		panes.eq(tabIndex).fadeIn(200, done);
	}
	$tab = this.getTabs().eq(tabIndex);
	if($tab.attr("id") == "wanted"){//Going to my special tab.
		$("ul.tabs.summaries").animate({"left" : "-160px"}, 300);//Sliding it out
	}
	// the supplied callback must be called after the effect has finished its job
	done.call();
});

About Simeon Cheeseman

I enjoy a wide variety of computer and board games, have a BSc in Computer Science and have played percussion for 18 years.

Posted on February 4, 2011, in jQuery, jQuery Tools. Bookmark the permalink. Leave a comment.

Leave a comment