title: jQuery Animate - doesn't animate absolute DIV
body: <p>do you know why i cant animate a absolute-positioning div with jQuery?</p>
  
  <p>show please here (here is my example ):</p>
  
  <p><a href="http://jsfiddle.net/2VJe8/">http://jsfiddle.net/2VJe8/</a></p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
      &lt;div class="test"&gt;
          &lt;div class="box"&gt;
              &lt;div class="arrow"&gt;&lt;/div&gt; 
          &lt;/div&gt;
          &lt;a href="#" class="btnStartAni"&gt;Animate&lt;/a&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>​</p>
  
  <p>CSS:</p>
  
  <pre><code>.test { margin: 0; padding: 0;}
  .test .box { width: 150px; height: 140px; background-color: red; position: relative; }
  .test .box .arrow { width: 50px; height: 50px; background-color: black; position: 
  absolute; bottom: 0; right: -50px;}​
  </code></pre>
  
  <p>JavaScript: </p>
  
  <pre><code>jQuery(".test a.btnStartAni").on("click", function(e){
     e.preventDefault();
    jQuery(".box").animate({ width: 400}, 800);
  });
  </code></pre>
  
  <p>​</p>
  
  <p>the black box is during animation hide! But i dont know why?</p>
  
  <p>can you help me please?</p>