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中，你可以在右侧块上设置transition-property和transition-duration设置，但不在左侧块上设置。如果您将它们注释掉，则两个转换都会快速同时发生。如果将镜像的设置添加到左侧，则它们发生得更慢。

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

2 个答案: