相当基本的 JQuery 动画队列，但不起作用

Question

所以，我有了这个伟大的（？）想法来构建我自己的选项卡系统，因为我尝试过的脚本都没有像我希望的那样工作。

我有一个带有链接的列表，以及几个一开始就隐藏的 div。单击 LI，任何可见的 div 都会隐藏，然后所选的链接/div 会淡入。

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

现在，问题出在动画上（除了脚本不起作用）。我的目标是为任何可见的 DIV 提供 fadeOut('fast')，然后为选定的 li/div 提供 fadeIn('slow')。排队，就是这样。

有什么想法吗？

Answer 1

jQuery fadeOut 可以有两个参数，第二个是动画完成后调用的函数，所以这可能就是您想要的：

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