javascript - 动画div的高度

Question

我有一堆 div，可以在单击时更改 z-index。当一个新的 div 获得最高的 z-index 时，我想为它的高度设置动画。从 0 到 100p，所以它看起来像“增长”。

有人可以帮忙吗？

jsFiddle:http://jsfiddle.net/nfp17etg/2/

<div class="holder">
    <div class="one current">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
</div>
<button>click</button>

body {
    margin:0;
    padding:0;
}
.holder {
    width: 100px;
    height:100px;
    border:1px solid #000000;
    position: relative;
}

.holder div {
    width: 100px;
    height: 100px;
    position:absolute;
    top:0;
    left:0;
    z-index:0;
}
.holder div.current{
    z-index:1;
}
.one {
   background:red;
}
.two {
    background:green;
}
.three {
    background: blue;
}

$("button").click(function(){
    if ($(".holder >div:last-child").hasClass("current")) {
        $(".holder >div:last-child").removeClass("current");
        $(".holder >div:first-child").addClass("current");
    }
    else { 
        $(".current").removeClass("current").next().addClass("current");
    }
});

Answer 1

试试这个

$(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");
    });
});

check jsFiddle demo: