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.double 设置动画之前为#block.single 设置动画，我希望同时为它们设置动画。

非常感谢任何帮助，我已准备好完成这项工作。呵呵。

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/