Adding a fadeOut to tabs <p>I'd like to add a fadeout to the tabs <a href="http://www.inside-guides.co.uk/brentwood/restaurants/chinese-restaurants/mizu-brentwood-402.html" rel="nofollow">on my page here</a>, if someone could help with the javascript side?</p> <p>Here's the html:</p> <pre><code>&lt;ul class="tabs clearfix"&gt; &lt;li class="aboutustab active" style="border-left:1px solid #ccc;"&gt;&lt;div class="up"&gt;&lt;/div&gt;About&lt;/li&gt; &lt;li class="maptab"&gt;&lt;div class="up"&gt;&lt;/div&gt;Map&lt;/li&gt; &lt;li class="featurestab"&gt;&lt;div class="up"&gt;&lt;/div&gt;Features&lt;/li&gt; &lt;li class="voucherstab"&gt;&lt;div class="up"&gt;&lt;/div&gt;Offers&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>And the here's the javascript:</p> <pre><code>$(window).load(function(){ $('.tab:not(.aboutus)').hide(); $('.tabs li').click(function(){ var thisAd = $(this).parent().parent(); $(thisAd).children('.tab').hide(); $(thisAd).children('.'+$(this).attr('class').replace('tab','')).show(); $('.tabs li').removeClass('active'); $(this).addClass('active'); }); if(window.location.hash) { if (window.location.hash == "#map") { $(".Advert").children('.tab').hide(); $(".Advert").children('.map').show(); $('.tabs li').removeClass('active'); $('.maptab').addClass('active'); } if (window.location.hash == "#voucher") { $(".Advert").children('.tab').hide(); $(".Advert").children('.vouchers').show(); } } }); </code></pre> <p>I have the <a href="http://twitter.github.io/bootstrap/javascript.html#transitions" rel="nofollow">bootstrap.js plugin</a> from here and would like to use that, if anyone was familiar with that it'd be ideal.</p> <p><a href="http://www.inside-guides.co.uk/brentwood/pages/advertise.html" rel="nofollow">Here's how I would like it to work.</a></p> <p>Update: This is what I have now, but the fade effect is different for each tab almost - I like the transition back to the About Us tab which isn't as "heavy" as the transition of the others. The offers tab is leaving remnants of the 'Features' tab content too.</p> <pre><code> $(window).load(function(){ $('.tab:not(.aboutus)').fadeOut(); $('.tabs li').click(function(){ var thisAd = $(this).parent().parent(); $(thisAd).children('.tab').fadeOut(); $(thisAd).children('.'+$(this).attr('class').replace('tab','')).fadeIn(); $('.tabs li').removeClass('active'); $(this).addClass('active'); }); newContent.hide(); currentContent.fadeOut(750, function() { newContent.fadeIn(500); currentContent.removeClass('current-content'); newContent.addClass('current-content'); }); if(window.location.hash) { if (window.location.hash == "#map") { $(".Advert").children('.tab').fadeOut(750); $(".Advert").children('.map').fadeIn(500); $('.tabs li').removeClass('active'); $('.maptab').addClass('active'); } if (window.location.hash == "#voucher") { $(".Advert").children('.tab').fadeOut(750); $(".Advert").children('.vouchers').fadeIn(500); } } }); </code></pre>