Question

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

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

我已经把我的尝试放在一起了。

$(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社交信息的背景。它不会淡化子元素。或者立即查看Final_JSfiddle上的cSS。请标出答案。

Answer 2

我简化了你要做的事情：example - 来自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(); }); 
    });
});

如果你想点击它，你可以拨打toggle而不是hover - 这只是它触发的方式，功能仍然相同。

div中的div切换为淡入淡出

2 个答案: