Анимация высоты div

Question

У меня есть этот стек div, который меняет индекс z на клик. Когда новый 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: