Javascript 设置div高度的动画

我有一堆div，它可以在单击时更改z索引。当一个新的div得到最高的z索引时，我想设置它的高度动画。从0到100便士，所以它看起来像是在“成长”

有人能帮忙吗

jsFiddle：

$（“按钮”）。单击（函数（）{
if（$（“.holder>div:last child”）.hasClass（“当前”））{
$（“.holder>div:last child”）.removeClass（“当前”）；
$（“.holder>div:first child”）.addClass（“当前”）；
}
否则{
$（.current”）.removeClass（“current”）.next（）.addClass（“current”）；
}
});

试试这个

$(document).ready(function(){
    $("button").click(function(){
        var div = $("div");
        div.animate({height: '300px', opacity: '0.4'}, "slow");
        div.animate({width: '300px', opacity: '0.8'}, "slow");
        div.animate({height: '100px', opacity: '0.4'}, "slow");
        div.animate({width: '100px', opacity: '0.8'}, "slow");
    });
});

---

您可以使用

transform:scale（1.5，1.5）

或添加了代码的东西来模拟增长。谢谢你的意见。我就是这么想的。只是不知道如何应用它。我不想让它变大。只设置高度的动画，像这样吗@阿肖特卡纳米扬。几乎！下面的div必须是可见的。所以它几乎就像一个面具。我无法理解你到底想要什么。嗨，谢谢！这几乎就是我想要的。为了进一步解释我的问题，我稍微修改了一下小提琴。我希望下面的所有div都可见并具有高度。它只是最上面的一个，将从0到100像素进行动画制作。不幸的是，我没有得到它。正如您在提供的小提琴中看到的，仍然不在那里。

$(document).ready(function(){
    $("button").click(function(){
        var div = $("div");
        div.animate({height: '300px', opacity: '0.4'}, "slow");
        div.animate({width: '300px', opacity: '0.8'}, "slow");
        div.animate({height: '100px', opacity: '0.4'}, "slow");
        div.animate({width: '100px', opacity: '0.8'}, "slow");
    });
});