1

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

手风琴的右侧已经开始工作，但左侧没有。

我把我的代码放在jsFiddle

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

Javascript：

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

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

2 回答 2

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/

于 2013-06-20T15:55:41.460 回答
0

在您的 css 中，您可以在右侧块上设置转换属性和转换持续时间设置，但不能在左侧块上设置。如果您将它们注释掉，则两种转换都会同时快速发生。如果您将这些设置镜像添加到左侧，它们都会发生得更慢。

于 2013-06-20T15:52:06.477 回答