javascript - jQuery - 如何根据类获取元素的动态宽度

Question

我有这个包含两个 div 的基本动画。一个 div 的类别为 single另一个 div 的类是 double .每个都有 39px 的高度。

.single元素的宽度为 100px，.double元素的宽度为 200px，但是，我从 .single 开始div 为 50px，和 .double在 100px，然后，使用 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/