0

目标：
当单击徽标图像并淡出“tiles-wrapper”DIV 中的所有其他内容时，淡入（）“公司内容”。COMPANY CONTENT 将与完整的“tiles-wrapper”显示 DIV 的宽度相同。

那么...
当显示“公司内容”时，返回链接将页面返回到其原始状态。

我是否需要为“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

更新：

使tiles-wrapper的内容宽度和高度相同但使其隐藏，并使用javascript生效。

代码：

$(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 上的演示

再次更新：

我做了一个淡入淡出效果的Demo，但是昨天在fiddle中忘记更新了，查看这个Demo

于 2013-05-22T01:08:04.243 回答