get previous siblings, accordion effect

Question

I'm trying to get an accordion effect on a DIV when hovering.

The right side of the accordion is working already, but the left one isn't.

I put my code in jsFiddle

Can someone please help me with the left side? I've been trying it for hours but it won't work :(

Javascript:

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

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

Answer 1

The reason the right is fading, and the left isn't is because you are applying a CSS transition to the right side spans.

You can easily address this by applying the same transition to <span> tags:

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

In fact, you could condense your code and make it easier to adjust overall by combining repeated styles across the multiple spans into single definitions.

For example:

.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;
}

See the working example here: http://jsfiddle.net/uBBZ2/14/

Answer 2

In your css you set the transition-property and transition-duration settings on the right side blocks, but not the left side ones. If you comment them out, both transitions happen quickly and at the same time. If you add those settings mirrored to the left side, they both happen more slowly.