1

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

.single元素的宽度为 100px，.double元素的宽度为 200px，但是，我从.single50px 和.double100px 的 div 开始，然后使用 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，我希望同时动画它们。

任何帮助将不胜感激，我准备好了。呵呵。

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 回答