title: jQuery Append on document load, appends two times and seems not to wait until document is loaded
body: <p>I'm trying to create a navigation FX on the header's nav appending an hr and animating its width but I have two problems:</p>
  
  <ol>
  <li>Before the appending function I try to get the target width but the value returned is lower than the real width -- [Solved by @Maxzeroedge]: I should have get the padding value too</li>
  <li>The hr it's appended two times</li>
  </ol>
  
  <p>This is the code:</p>
  
  <pre><code>$(document).ready(function(){
      $('.onPage').append('&lt;hr/&gt;');
      var targetWi = $('.onPage').width();
      $('.onPage hr').animate({
          'width':targetWi
      }, 2000)
  })
  </code></pre>
  
  <p>I'm sure the 2 problems are related and may have something to do with the document loading process,but I've tried different document jQuery listeners and I'm getting the same result.</p>
  
  <p>Thanks for reading! </p>