0

タスク：ナビゲーションフィルターをクリックliすると、トランジショナルフェードインフェードアウトでコンテンツを表示および非表示にします。

問題 このフェードイン//フェードアウトトランジションをどこに配置するかを推測して確認しています。さらに、4つの条件文を使用しているため、コードが非効率的すぎるように感じます。スタックは、このスクリプトの全体的なロジックを改善するためのソリューションを作成することにつながるので、かなりの移行を行うことができます：c？

ライブコード

jQueryスクリプト

$(document).ready(function () {

//attach a single click listener on li elements
$('li.navCenter').on('click', function () {

    // get the id of the clicked li
    var id = $(this).attr('id');

    // match current id with string check then apply filter
    if (id == 'printInteract') {
        //reset all the boxes for muliple clicks 
        $(".box").find('.video, .print, .web').closest('.box').show();

        $(".box").find('.web, .video').closest('.box').hide();

        $(".box").find('.print').show();
    }

    if (id == 'webInteract') {
        $(".box").find('.video, .print, .web').closest('.box').show();
        $(".box").find('.print, .video').closest('.box').hide();
        $(".box").find('.web').show();
    }
    if (id == 'videoInteract') {
        $(".box").find('.video, .print, .web').closest('.box').show();
        $(".box").find('.print, .web').closest('.box').hide()
        $(".box").find('.video').show();
    }
    if (id == 'allInteract') {
        $(".box").find('.video, .print, .web').closest('.box').show();
    }



});

選択されたHTML

<nav>
<ul class="navSpaces">
    <li id="allInteract" class="navCenter">
        <a id="activeAll" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/logo30px.png" /><h3>all</h3></div></a>
    </li>
    <li id="printInteract" class="navCenter">
        <a id="activePrint" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/print.gif" /><h3>print</h3></div></a>
    </li>
    <li id="videoInteract" class="navCenter">
        <a id="activeVideo" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/video.gif" /><h3>video</h3></div></a>
    </li>
    <li id="webInteract" class="navCenter">
        <a id="activeWeb" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/web.gif" /><h3>web</h3></div></a>
    </li>
</ul>

BOX HTML

<div class="box">
<h1 title="Light me up"></h1>
<div class="innerbox">
    <figure>
        <img src="" />
    </figure>
    <ul class="categorySelect">
        <li class="print"></li>
        <li class="video"></li>
        <li class="web"></li>
    </ul>
</div>

ps。初心者の質問でごめんなさい

4

1 に答える 1

3

コードを簡略化して、次のようにトランジションを追加できます。

$(document).ready(function () {
    //attach a single click listener on li elements
    $('li.navCenter').on('click', function () {
        var all = $(".box").find('.video, .print, .web');
        var activeCls = "." + this.id.replace("Interact", "");
        if (activeCls == ".all") {
            all.closest('.box').show();
        } else {
            var active = $(".box").find(activeCls);
            active.closest('.box').show();
            all.not(active).closest('.box').hide();
        }
    });
});

これが機能している場合は、.show()および.hide()呼び出しの代わりに、選択したjQueryトランジションを使用できます。

各アイテムのコンテナを非表示/表示することを想定していますが、非表示にして表示.boxしているコンテンツの実際のページのHTMLを表示しないと、それが何をしたいかわかりません。非表示/表示するものが何であれ、元のコードとそうでないものhide()の両方で一貫性を保つ必要があります。show()

使用するトランジションを選択するときは、複数のアイテムを削除/追加するときにうまく機能するものを使用する必要があります。アイテムが最終的にフェードアウトすると、残りのアイテムがジャンプするため、fadeIn（）とfadeOut（）はおそらくそのようにはうまく機能しません。何が最適かわかりません。おそらく、幅をゼロにアニメートします。

于 2012-06-07T04:24:03.323 に答える