得到以前的兄弟姐妹，手风琴效果

Question

悬停时，我试图在DIV上获得手风琴效果。

手风琴的右侧已经在工作，而左侧的则没有。

我把我的代码放在jsFiddle中

有人可以帮我左边吗？ 我已经尝试了好几个小时，但它不起作用:(

使用Javascript：

$(document).ready(function () {
    $('.middle').hover(function () {
        $(this).siblings().stop().animate({
            opacity: 1
        }, 200);
    },

    function () {
        $(this).siblings().stop().animate({
            opacity: 0
        }, 200);
    });
});

Answer 1

右侧逐渐消失而左侧并非渐渐消失的原因是因为您正在向右侧跨度应用CSS过渡。

您可以通过对<span>标签应用相同的转换轻松解决此问题：

.squares span {
    transition-property:opacity;
    transition-duration:1s;
    transition-delay:0.1s;
}

实际上，您可以通过将跨多个跨度的重复样式组合为单个定义来压缩代码并使整体调整更容易。

例如：

.squares span {
    opacity: 0;
    float: left;
    width: 139px;
    height: 138px;
    transition-property:opacity;
    transition-duration:1s;
    transition-delay:0.7s;
}

span.middle {
    background:#0f0;
    opacity: 1;
}

span.left1,
span.right1 {
    background:#00F;
    transition-delay:0.1s;
}
span.left2,
span.right2 {
    background:#0FF;
    transition-delay:0.3s;
}
span.left3,
span.right3 {
    background:#0F0;
    transition-delay:0.5s;
}
span.left4,
span.right4 {
    background:#FF0;
    transition-delay:0.7s;
}

参见此处的工作示例： http : //jsfiddle.net/uBBZ2/14/

Answer 2

在CSS中，您可以在右侧块上设置过渡属性和过渡持续时间设置，但不能在左侧块上进行设置。 如果您将它们注释掉，则这两种转换都会很快同时发生。 如果将这些设置镜像到左侧，则它们的发生速度都将变慢。