jquery - div 在组中切换并带有淡入淡出

Question

最近，有人要求我弄清楚如何复制此站点上的功能：

http://metalabdesign.com/company/

当您单击任何员工时。我试图梳理他们的 javascript，但发现这几乎是不可能的。有人可以帮忙吗？我需要完美地复制这个功能。

我已经将一个 jsfiddle 与我的尝试放在一起。

http://jsfiddle.net/zGaTM/

$(document).ready(function () {
    $('.the-team').click(
      function() {
        $('.social-info').hide();
        $(this).next('.social-info').addClass("showdetails");
    },

    function () {
        $(this).next('.social-info').addClass("hidedetails");
    });
});

Answer 1

在这里我在 jsfiddle上创建它更改悬停以单击它会起作用

    $(document).ready(function () {
    $('.the-team').click(  //click or hover
      function() {
          $('.social-info').hide();
          $(this).next('.social-info').show();
          $(this).next('.social-info').removeClass("hidedetails");
        $(this).next('.social-info').addClass("showdetails");
    });
});

div .teamCont 是 css 中的主要容器 put float:left; 水平对齐它们。如果您为主容器提供不透明度，它将应用于该容器内的每个子容器。相反，如果使用不透明度，我会建议使用透明 PNG 文件作为 div social-info 的背景。它不会淡出子元素。或者现在在 Final_JSfiddle 上检查cSS。请标记答案。

Answer 2

我已经简化了您尝试做的事情：示例- 来自 Ali Exalter 的示例

$(document).ready(function () {
    $('.teamCont').hover(
    function () {
        $(this).find("img").fadeTo("fast" , 0.1, function() { $(this).next('.social-info').show(); });
    },
    function () {
        $(this).find("img").fadeTo(100 , 1, function() { $(this).next('.social-info').hide(); }); 
    });
});

如果你想要它 onclick 你可以调用toggle而不是hover- 这只是触发方式的问题，功能仍然相同。