jQuery将图像替换为内容

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

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

我是否需要使用两个单独的UL，分别为“公司徽标”和“公司内容”（=废弃“li.content wrapper”想法）与发布的代码使用唯一的类名？


**我以前确实做过。我疯了。我不记得我是怎么做到的。如有任何建议，我们将不胜感激*

<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>

第一公司


公司2


公司3

。。。并在PHP中循环以添加更多行

---

更新：

使瓦片包装的内容宽度和高度相同，但使其隐藏，并使用javascript使其生效

JsCode:

$(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);
        });
    });
});

这是你的电话号码

再次更新：

---

我做了一个淡入淡出效果的演示，但我昨天忘了在小提琴中更新它，请检查

该网站不允许我更新输入错误“.tiles lis”到“.tiles list”。。。不管我不能让它工作。你能发布CSS吗？很抱歉我误解了你的意思。我更新了答案，并在JSFIDLE上写了一个简单的演示。但我不知道动画到底是什么样子，特别是从“点击徽标图像”到“淡出内容”的转换。所以如果我没有做错什么，请告诉我或者看看JSFIDLE代码，然后自己修改它（我建议这样做）。您的JSFIDLE代码非常完美！我试图对上面的代码进行更新，但是这个网站不允许我按照我想要的方式编辑你的代码。（*因此，请为其他人编辑本文中的代码。）**对未来的程序员来说至关重要：JQ、HTML和CSS对于正确使用此功能都至关重要。我在fiddle中有一个更新版本。如果您更改了某些内容，并且认为您的版本更适合发布，请将其放在您的主题中。