1

私は2つのdivを含むこの基本的なアニメーションを持っています。一方のdivにはクラスがありsingle、もう一方のdivにはクラスがありdoubleます。それぞれの高さは39pxです。

.single要素の幅は100ピクセル、要素の幅は200ピクセルですが、最初はdivを50ピクセル、次に.double100ピクセルで開始し、jQueryを使用して、各divをそれに応じた幅にアニメーション化します。クラス。説明するのは少し難しいので、コード形式を紹介します。.single.double

HTML：

<div id="block" class="red single"></div>
<div id="block" class="blue double"></div>

CSS：

#block {
    display: block;
    height: 16px; /* animate to: 39px */
    background-color: #eee;
}

#block.red {
    background-color: red;
}

#block.blue {
    background-color: blue;
}

#block.single {
    width: 50px; /* animate to: 100px */
}

#block.double {
    width: 100px; /* animate to: 200px */
}

jQuery：

    if($("#block").hasClass("double")) {
        respectiveWidth = "200px"
    }

    if($("#block").hasClass("single")) {
        respectiveWidth = "100px"
    }

    $("#block").delay(delayRate).animate({
        height: "145px",
        width: respectiveWidth
    }, 900);

私は次のようにします：

$("#block").animate({
    height: "39px"
});

$("#block.single").animate({
    width: "100px"
});

$("#block.single").animate({
    width: "200px"
});

しかし、それはアニメート#block.singleする前にアニメートするので#block.double、同時にアニメートしたいと思います。

どんな助けでも大歓迎です、私はこれで終わらせる準備ができています。ヘヘ。

4

1 に答える 1

3

IDは一意である必要があります。代わりにクラスを使用できます。次のことを試してください。

<div class="block red single"></div>
<div class="block blue double"></div>


$(".block").animate({
    height: "39px"
});

$(".block.single").animate({
    width: "100px"
}, 700);

$(".block.double").animate({
    width: "200px"
}, 700);

http://jsfiddle.net/eCUf8/

于 2012-12-20T02:31:14.310 に答える