How to add fade effect to tabs/panes? Created Jun 12, 2009

aha! Got it figured out. Duh.

$(function() {
$("ul.tabs").tabs("div.panes > div",{current: 'active',effect: "fade" });

});

Does anyone know where I can control the speed of the fade?

yes. I have now added a new configuration option: fadeInSpeed.

So....like this?

$(function() {
$("ul.tabs").tabs("div.panes > div",{current: 'active',effect: "fade", fadeInSpeed: "slow" });

Do I use fast, normal, slow? Or is there a way to control it in seconds?

I'm sorry, I have another question! I'm trying to show an overlay when the mouse is hovered over a link, but I want the overlay to disappear when the mouse is removed. Sort of like the tooltip but I'm using the tabs function for it because I found it difficult to make the overlay appear where I wanted. It works great but I don't know how to tell it to hide the overlay when the mouse is moved away from the link.

$(function() {
$("ul.readmore").tabs("div.overlay > div",{current: 'active',event: "mouseover",effect: "fade", fadeInSpeed: "slow"});

});

<ul class="readmore">

read more...

<div class="overlay">
<div></div>
<div><img src="i/overlay.png"></div>
</div>

I threw an empty div in there because I don't want the overlay shown when the page loads (probably not the best way to do that huh?)

Thanks for all your help!

Thanks for this post paradise, worked as i wanted it.

How/where would I add it in this code though (I am trying without luck here):

$(function() {
	$("ul.tabs").tabs("div.panels > div", function(i) {
		// get the panel to be opened
		var pane = this.getPanes().eq(i);
		// if it is empty ..
		if (pane.is(":empty")) {
			// load it with a page specified in the tab's href attribute
			pane.load(this.getTabs().eq(i).attr("href"));
		}
	});
});