jquery - Is it possible to animate and change the width of a div only from a specified height and leave the rest as it is? -
i want animate div top half(height:50px) has width of 100px , bottom half(height:200px) has width of 200px. possible?
see jsfiddle example of end result have animated in 1 div.
some css jsfiddle example pic because stackoverflow giving me trouble having jsfiddle link:
#a{ background-color:blue; height:50px; width:100px; } #b{ background-color:blue; height:200px; width:200px; }
is possible? if yes, how go doing so?
i not sure hope link you. http://css-tricks.com/snippets/jquery/animate-heightwidth-to-auto/
and this:
<!doctype html> <html> <head> <style> div { background-color:#bca; width:200px; height:1.1em; text-align:center; border:2px solid green; margin:3px; font-size:14px; } button { font-size:14px; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <button id="go1">» animate block1</button> <button id="go2">» animate block2</button> <button id="go3">» animate both</button> <button id="go4">» reset</button> <div id="block1">block1</div> <div id="block2">block2</div> <script> $( "#go1" ).click(function(){ $( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 }) .animate({ fontsize: "24px" }, 1500 ) .animate({ borderrightwidth: "15px" }, 1500 ); }); $( "#go2" ).click(function(){ $( "#block2" ).animate({ width: "90%" }, 1000 ) .animate({ fontsize: "24px" }, 1000 ) .animate({ borderleftwidth: "15px" }, 1000 ); }); $( "#go3" ).click(function(){ $( "#go1" ).add( "#go2" ).click(); }); $( "#go4" ).click(function(){ $( "div" ).css({ width: "", fontsize: "", borderwidth: "" }); }); </script> </body> </html>
Comments
Post a Comment