Take the 2-minute tour ×

I'm working on a very simple fadeIn / fadeOut tab system using jQuery, however, it's not as smooth as I'd like it to be.

Here is my DEMO for you to see it in action.

Take a look at the demo. I expected it to fade in and out of one another, but if you click through Tab 1 > Tab 2 > Tab 3 then back to Tab 1, there are strange fadeIn/Out glitches along the way.

Any ideas how I fix this? My jQuery is:



            var $active, $content, $links = $(this).find('a');

            $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
            $content = $($active.attr('href'));

            $links.not($active).each(function () {

            $(this).on('click', 'a', function(e){


                $active = $(this);




and my HTML is:

<ul class="tabs">
    <li><a href="#tab1">Overview</a></li>
    <li><a href="#tab2">Sub Nav 2</a></li>
    <li><a href="#tab3">Sub Nav 3</a></li>

<div id="tab1">
    <p>this is a test 1</p>
<div id="tab2">
    <p>this is a test 2</p>
<div id="tab3">
    <p>this is a test 3</p>

Many thanks for any pointers :-)

share|improve this question
Not a glitch lol, asynchronous. Just wait till the fadeOut is finished by using the callback: jsfiddle.net/j4eFE/5 –  Bondye Apr 25 '13 at 12:52
add comment

3 Answers

up vote 2 down vote accepted

You need to make the code call back once its finished fading out. Currently the code will execute the fade in before the fading out has completed. In order to cascade the call you can provide a function as the second parameter to fadeOut. This function will call immediately after the function has completed it's animation. In my case I provided an anonymous function that does the remaining code.

$content.fadeOut("slow", function()
                                     $active = $(c);
                                     $content = $($(c).attr('href'));


I've updated you're fiddle. With the correct code modificiations.


share|improve this answer
That's absolutely fantastic!! Really appreciate your help with this. Time to learn some more jQuery I think :-) –  michaelmcgurk Apr 25 '13 at 12:58
Can you accept answer? –  cgatian Apr 25 '13 at 13:10
Sorry, got a bit distracted - cheers sir!! –  michaelmcgurk Apr 25 '13 at 14:01
add comment

If you want them to fade in and out on top of each other then you'll have to position them on top of each other. Otherwise they're positioned next to each other in the normal flow of the document so you're getting that strange looking behavior where the new item starts off to the side and then slides left when the disappearing item finally gets set to display: none. Try using position: absolute to position the items on top of each other. Then the fade in/out should do what you want.

share|improve this answer
add comment

instead of div {float:left;} in the css of your jsfiddle, use div{position:absolute;} http://jsfiddle.net/j4eFE/11/

Using this your fadein and fadeout will occur simultaneously and will look very smooth.

share|improve this answer
add comment

Your Answer


