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/

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

1 个答案: