How to add fadeIn and fadeOut to idTabs plugin's JS snippet?
Posted
by
iMagdy
on Stack Overflow
See other posts from Stack Overflow
or by iMagdy
Published on 2010-12-31T08:46:18Z
Indexed on
2010/12/31
8:53 UTC
Read the original article
Hit count: 213
Hi, I am using the jQuery plugin idTabs [ [www.sunsean.com/idTabs][1] ] and it allows me to line tabs and tabs' content via element#id and element href="#id"
Ok, so I use this snippet:
<script type="text/javascript">
$(document).ready(function() {
$("#requestPool").idTabs();
$(".tabs").idTabs();
$(".miniTabs").idTabs(".active");
$(".switchers").idTabs(".activePanel");
});
</script>
To run the plugin on two different areas: div#requestPool
this has it's own tabs and it's own tab content, Also the div.tabs
which is another place and has it's own tabs and it's own tabs content.
The div.miniTabs
and div.switchers are the divs that includes the tabs links (tabs headers) and I putted them in the snippet to change the default selected tab class from .selected
to .active
and .activePanel
Now, what I would love to add is a nice fadeIn and fadeOut effects to the content of my tabs while browsing through them.
Thanks
Here is the HTML code for one of the tabbed areas:
<div id="requestPool">
<!-- The tabs heads -->
<div class="miniTabs">
<a href="#today" class="active">Today</a> <!-- First active tab -->
<a href="#tomorrow">Tomorrow</a>
<a href="#friday">Friday</a>
<a href="#saturday">Saturday</a>
<a href="#sunday">Sunday</a>
<a href="#monday">Monday</a>
<a href="#tuesday">Tuesday</a>
</div>
<!-- The tabs contents (the ones that I want them to fade in and out while browsing through them using the tabs above) -->
<div id="today"class="miniTab"></div>
<div id="tomorrow"class="miniTab"></div>
<div id="friday"class="miniTab"></div>
<div id="saturday"class="miniTab"></div>
<div id="sunday"class="miniTab"></div>
...etc the week days
</div>
Thanks very much (again the tabs are working very fine, but without the fade effect which I want to have).
© Stack Overflow or respective owner