javascript - 获得 previous sibling 姐妹， Accordion 效果

Question

我试图在悬停时在 DIV 上获得 Accordion 效果。

Accordion 的右侧已经开始工作，但左侧还没有。

我把我的代码放在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/