title: jQuery UI - positioning a hidden div using position API does not position correctly
body: <p>I am trying to position a div using jquery UI <a href="http://jqueryui.com/position/" rel="nofollow">position</a> API (<code>#changer</code> relative to <code>.demo</code>) in below HTML.</p>
  
  <p><a href="http://jsfiddle.net/jttdk/1/" rel="nofollow">http://jsfiddle.net/jttdk/1/</a></p>
  
  <pre><code>&lt;div class="demo-content"&gt;
      &lt;div class="demo" title="click anywhere inside" &gt;demo div&lt;/div&gt;
      &lt;div class="demo" title="click anywhere inside" &gt;demo div&lt;/div&gt;
      &lt;div class="demo" title="click anywhere inside" &gt;demo div&lt;/div&gt;
      &lt;div class="demo" title="click anywhere inside" &gt;demo div&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="changer"&gt;changer div&lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$('.demo').click(function() {
      var _that = this;
      $("#changer").fadeOut(100, function() {
          console.log(_that.className);
          $(this).position({
              of: _that,
              my: 'left top',
              at: 'right top',
              offset: '10 10'
          }).show();
      });
  
  });
  </code></pre>
  
  <p><strong>Note:</strong> </p>
  
  <ol>
  <li>It works fine the first time.</li>
  <li>The same works fine if I remove <code>.fadeOut</code> and move the <code>.position</code> code outside like below </li>
  </ol>
  
  <p><a href="http://jsfiddle.net/jttdk/3/" rel="nofollow">http://jsfiddle.net/jttdk/3/</a></p>
  
  <pre><code>    $("#changer").position({
          of: this,
          my: 'left top',
          at: 'right top',
          offset: '10 10'
      }).show();
  </code></pre>
  
  <p>Same fails if I add a <code>.hide</code> before <code>.position</code>. ((i.e) <code>$("#changer").hide().position</code>)</p>
  
  <p>I am curious to know what I am doing wrong here.</p>