0

目標:
ロゴ画像がクリックされたときに「company-content」を fadeIn()し、「 tiles -wrapper」DIV 内の他のすべてのコンテンツをフェードアウトする。COMPANY CONTENT は、完全な「タイル ラッパー」表示 DIV と同じ幅になります。

THEN...
「会社のコンテンツ」が表示されたら、BACK リンクでページを元の状態に戻します。

'company-logos' と 'company-content' (= 'li.content-wrapper' のアイデアを捨てる) に対して、投稿されたコードに対して一意のクラス名を持つ 2 つの別々の UL を使用する必要がありますか?


**私は実際にこれを以前に行ったことがあります。気がおかしくなりそうだ。どうやってこれをしたのか思い出せません。任意の提案をいただければ幸いです。*

<div class="tiles-wrapper">
    <ul class="tiles-list">
        <li class="company-wrapper">
            <div class="company-logo"><a class="company-logo-btn" href="#"><img src="company1.png" alt="" border="0" /></a></div>
            <div class="company-content">
                <h1>Company 1</h1>
                <div class="goback"><a class="goback-btn" href="#">&larr; BACK TO ALL</a></div>
            </div>
        </li>
        <li class="company-wrapper">
            <div class="company-logo"><a class="company-logo-btn" href="#"><img src="company2.png" alt="" border="0" /></a></div>
            <div class="company-content">
                <h1>Company 2</h1>
                <div class="goback-btn"><a class="goback-btn" href="#">&larr; BACK TO ALL</a></div>
            </div>
        </li>
        <li class="company-wrapper">
            <div class="company-logo"><a class="company-logo-btn" href="#"><img src="company3.png" alt="" border="0" /></a></div>
            <div class="company-content">
                <h1>Company 3</h1>
                <div class="goback-btn"><a class="goback-btn" href="#">&larr; BACK TO ALL</a></div>
            </div>
        </li>
    </ul>
</div>

...さらに行を追加するためにPHPでループします...

初期表示 結果表示

4

1 に答える 1

1

更新しました：

コンテンツの幅と高さを tile-wrapper と同じにしますが、非表示にし、javascript を使用して有効にします。

Jコード:

$(document).ready(function () {
    $(".company-logo-btn").on("click", function () {
        var bRunOnce = true;
        var $wrapper = $(this).parents(".company-wrapper:first");
        $wrapper.siblings().fadeTo("slow", 0, function () {
            if (bRunOnce) {
                bRunOnce = false;
                $wrapper.find(".company-content").fadeIn("slow");
            }
        });
    });
    $("body").on("click", ".goback-btn", function () {
        $(".company-content:visible").fadeOut("slow", function () {
            $(this).parents(".company-wrapper:first").siblings().css("visibility","").fadeTo("slow", 1);
        });
    });
});

Jsfiddleのデモはこちら

再度更新:

フェード効果のデモを作ったのですが、昨日フィドルで更新するのを忘れていました、このデモをチェックしてください

于 2013-05-22T01:08:04.243 に答える