title: Why jQuery.animate position doesn't work?
body: <p>I want to <strong>.animate</strong> css <strong>position property</strong> from <code>position : relative</code> to <code>position : absolute</code> with jQuery.</p>
  
  <p>I have a small div inside the div container and i want to expand this div when clicking on a button to fit to the window.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt; &lt;!-- div with position:relative --&gt;
      &lt;div id="content"&gt; &lt;!-- i want to expand this div using position:absolute to extract it from the container and to give width and height 100% --&gt;
          &lt;button id="full"&gt;Full&lt;/button&gt;
          &lt;button id="collapse"&gt;Collapse&lt;/button&gt;        
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I treid with <code>jQuery().animate</code> but doesn't work and i treid with <code>jQuery().css</code> and works, but not as I want.</p>
  
  <p>This what i did:</p>
  
  <pre><code>$(document).ready(function () {
  
  $("#collapse").hide();
  
  $("#full").bind("click", function (e) {
      e.preventDefault();
      $("#content").animate({
          width: "1000px",
          height:"1000px",
          top:0,
          left:0
      }, 500).css({"overflow": "visible", "position":"absolute"});
      $("#full").hide(100);
      $("#collapse").show(100); // can i use $("#collapse").css("display","block"); ?
  });
  
  $("#collapse").bind("click", function (e) {       
      e.preventDefault();
      $("#content").animate({
          width: "400px",
          height: "300px",
      }, 500).css({"overflow": "visible", "position":"relative"});
      $("#full").show(100);
      $("#collapse").hide(100);
  });
  });
  </code></pre>
  
  <p><br>
  <a href="http://jsfiddle.net/TJwsM/2/" rel="nofollow"><strong><em>JsFiddle Demo</em></strong></a></p>
  
  <p>Thank you very much for any help!<br>
  Best Regards.</p>