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.

http://jsfiddle.net/vr9ex/1/

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">&raquo; animate block1</button> <button id="go2">&raquo; animate block2</button> <button id="go3">&raquo; animate both</button>  <button id="go4">&raquo; 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

Popular posts from this blog

curl - PHP fsockopen help required -

HTTP/1.0 407 Proxy Authentication Required PHP -

c# - Resource not found error -