1

jQuery を使用して非常に単純なフェードイン/フェードアウト タブ システムに取り組んでいますが、思ったほどスムーズではありません。

これが私のデモで、実際の動作を確認できます。

デモを見てみましょう。私はそれが互いにフェードインおよびフェードアウトすることを期待していましたが、タブ 1 > タブ 2 > タブ 3をクリックしてからタブ 1に戻ると、途中で奇妙なフェードイン/アウトの不具合が発生します。

これを修正する方法はありますか？私のjQueryは次のとおりです。

$(document).ready(function(){

        $('ul.tabs').each(function(){

            var $active, $content, $links = $(this).find('a');

            $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
            $active.addClass('active');
            $content = $($active.attr('href'));

            $links.not($active).each(function () {
                $($(this).attr('href')).hide();
            });

            $(this).on('click', 'a', function(e){

                $active.removeClass('active');
                $content.fadeOut("slow");

                $active = $(this);
                $content = $($(this).attr('href'));

                $active.addClass('active');
                $content.fadeIn("slow");

                e.preventDefault();
            });
        });

    });

私のHTMLは次のとおりです。

<ul class="tabs">
    <li><a href="#tab1">Overview</a></li>
    <li><a href="#tab2">Sub Nav 2</a></li>
    <li><a href="#tab3">Sub Nav 3</a></li>
</ul>

<div id="tab1">
    <p>this is a test 1</p>
</div>
<div id="tab2">
    <p>this is a test 2</p>
</div>
<div id="tab3">
    <p>this is a test 3</p>
</div>

ポインタをありがとう:-)

4

3 に答える 3

2

フェードアウトが完了したら、コードをコールバックする必要があります。現在、コードはフェードアウトが完了する前にフェードインを実行します。呼び出しをカスケードするために、 fadeOutの 2 番目のパラメーターとして関数を提供できます。この関数は、関数がアニメーションを完了した直後に呼び出されます。私の場合、残りのコードを実行する無名関数を提供しました。

$content.fadeOut("slow", function()
                                 {
                                     $active = $(c);
                                     $content = $($(c).attr('href'));

                                     $active.addClass('active');
                                     $content.fadeIn("slow");
                                 });

私はあなたがフィドルだと更新しました。正しいコードの変更。

http://jsfiddle.net/R8yQV/

于 2013-04-25T12:54:14.217 に答える
0

それらを互いの上にフェードインおよびフェードアウトさせたい場合は、それらを互いの上に配置する必要があります。そうしないと、ドキュメントの通常のフローでそれらが隣り合って配置されるため、新しいアイテムが横に始まり、消えるアイテムが最終的に に設定されると左にスライドするという奇妙な動作が発生しdisplay: noneます。position: absoluteアイテムを互いの上に配置するために使用してみてください。次に、フェードイン/アウトはあなたが望むことをするはずです。

于 2013-04-25T12:52:44.223 に答える