Quite basic JQuery Animation-queuing, ain't working though

Question

So, I got this great (?) idea to build my own tabsystem, as none of the scripts I've tried worked as I hoped.

I've got a list with links, and a couple of divs which are hidden to begin with. Click a LI and any visible div hides whereafter the selected link/div fades in.

HTML

<ul>
<li id="tab1">Link</li>
<li id="tab2">Link</li>
<li id="tab3">Link</li>
</ul>

<div id="tab1div">Content</div>
<div id="tab2div">Content</div>
<div id="tab3div">Content</div>

JS

$('li').click(function(){

    $('div:visible').fadeOut(1000)
    .queue(function () {
        var id = $(this).attr('id');
        $('div#' + id + "div").fadeIn('slow');
        $(this).dequeue();
    });
});

Now, the problem is with the animations (apart from the script not working). I'm aiming for a fadeOut('fast') for any visible DIV, then a fadeIn('slow') for the selected li/div. Queued, that is.

Any thoughts?

Answer 1

jQuery fadeOut can have two parameters, the second being function called after the animation completes, so this is probably what you want:

$('li').click(function(){
    var id = $(this).attr('id');
    $('div:visible').fadeOut(1000, function () {
        $('#' + id + "div").fadeIn('slow');
    });
});