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

実際、複数のスパンで繰り返されるスタイルを 1 つの定義に組み合わせることで、コードを凝縮して全体的な調整を容易にすることができます。

例えば：

.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 では、右側のブロックに transition-property と transition-duration の設定を設定しますが、左側のブロックには設定しません。それらをコメントアウトすると、両方のトランジションが迅速かつ同時に発生します。左側にミラーリングされたこれらの設定を追加すると、どちらもより遅くなります。

于 2013-06-20T15:52:06.477 に答える