动画div的高度

Question

我有这个堆栈的div可以改变点击时的z-index。当一个新的div得到最高的z-索引被放置在顶部时，我想动画它的高度。从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: