Довольно простые JQuery Animation-очереди, хотя и не работают

Question

Итак, у меня появилась отличная (?) Идея создать собственную систему табуляции, поскольку ни один из скриптов, которые я пробовал, не работал так, как я надеялся.

У меня есть список со ссылками, и пара div, которые скрыты для начала. Нажмите LI, и любой видимый разделитель будет скрыт, после чего выбранная ссылка / разделение появится.

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();
    });
});

Теперь проблема с анимацией (кроме сценария не работает). Я стремлюсь к fadeOut("быстрый") для любого видимого DIV, затем к fadeIn("медленный") для выбранного li/div. В очереди, то есть.

Какие-нибудь мысли?

Answer 1

jQuery fadeOut может иметь два параметра, вторым является функция, вызываемая после завершения анимации, так что это, вероятно, то, что вам нужно:

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