javascript - Animate the height of div -
i have stack of divs changes z-index on click. when new div gets highest z-index being placed on top want animate height of it. 0 100p, looks "grows".
anyone can on this?
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"); } });
try one
$(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"); }); });
Comments
Post a Comment