SO Animations

HTML

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

<div id="content">
    <div class="one">
        <div class="one-1">test test test test</div><br />
        <div class="one-2">test test test test</div><br />
        <div class="one-3">test test test test</div><br />
    </div>
    <div class="two">
        <div class="two-1">test test test test</div><br />
        <div class="two-2">test test test test</div><br />
        <div class="two-3">test test test test</div><br />
    </div>
    <div class="three">
        <div class="three-1">test test test test</div><br />
        <div class="three-2">test test test test</div><br />
        <div class="three-3">test test test test</div><br />
    </div>	
</div>

CSS

ul li {
    display: inline-block;
    background: red;
    cursor: pointer;
}
#content {
    width: 300px;
}
#content>div {
    margin: 0 auto;    
    display: none;
    width: 0;
    height: 150px;
    text-align: center;
    font-size: 20px;
    margin-bottom: 180px;
}
.three {
    background: #EEE836;
}
.two {
    background: blue;
    color: white;
}
.one {
    background: red;
    color: white;
}

JavaScript

var ongoing = false;

var $tabs = $('ul').children('li'),
    $currentTab = $tabs.first();

$('.' + $currentTab.text()).css({ width: '300px' }).show();

$tabs.click(function() {
    var $tab = $(this);
    if (($tab.index() != $currentTab.index()) && !ongoing) {
        ongoing = true;

        var $currentDiv = $('.' + $currentTab.text()),
            $selectedDiv = $('.' + $tab.text());
        
		$currentDiv.children('div').animate({ opacity: 0 }, 1000).promise().done(function() {
  		    $currentDiv.animate({ width: '0px' }, 1000, function() {
                $currentDiv.hide();
                var $children = $selectedDiv.children('div');
                $children.css({ opacity: 0 });
                $selectedDiv.css({ width: '0px' }).show();
                $selectedDiv.animate({ width: '300px'}, 1000, function() {
                    var i = 0;
                    (function() {
                        var $child = $($children[i++] || []);
                        if ($child.length > 0) {
                            $child.animate({ opacity: 1 }, 2000, arguments.callee);  
                        } else {
                            ongoing = false;
                            $currentTab = $tab;
                        }
                    })(); 
                });
            });
        });
    }
});