jQuery - 如何根據類獲取元素的動態寬度

Question

我有這個基本的動畫，其中包括兩個div。 一個div有一個single的類，另一個div有一個double類。 每個都有39px的高度。

.single元素的寬度為100px，而.double元素的寬度為200px，但是，我從50px的.single div和100px的.double開始，然后，使用jQuery，我（希望）動畫每個div根據它的類來寬度。 這有點難以解釋，所以我將向您展示代碼格式：

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 ，我希望同時它們的動畫。

非常感謝任何幫助，我已准備好完成這項工作。 呵呵。

Answer 1

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/