1

それで、私が試したスクリプトはどれも期待どおりに機能しなかったので、私は自分のタブシステムを構築するというこの素晴らしい（？）アイデアを思いつきました。

リンク付きのリストと、そもそも非表示になっている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'）を目指しています。キューに入れられました。

何かご意見は？

4

1 に答える 1

0

jQueryのfadeOutには2つのパラメーターを含めることができ、2つ目はアニメーションの完了後に呼び出される関数であるため、これはおそらく必要なものです。

$('li').click(function(){
    var id = $(this).attr('id');
    $('div:visible').fadeOut(1000, function () {
        $('#' + id + "div").fadeIn('slow');
    });
});
于 2011-02-11T14:04:17.497 に答える