jQuery get updated position of an element
<p>I'm trying to track the position of an animated element, there are two buttons; one to move the element up, the other to move down, and each should print the new position after moving..here is the code:  </p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;style&gt;
        div {
          position:absolute;
          background-color:#abc;
          left:50px;
          top :50px;
          width:90px;
          height:90px;
          margin:5px;
        }
    &lt;/style&gt;

&lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(document).ready(function(){


$("#up").click(function(){
  $(".block").animate({"top": "-=50px"}, "slow");
  top  = $(".block").position().top;
left = $(".block").position().left; 
  $("#position").html("X: "+left+" , Y:"+top) ;
});

$("#down").click(function(){
  $(".block").animate({"top": "+=50px"}, "slow");
  top  = $(".block").position().top;
  left = $(".block").position().left; 
  $("#position").html("X: "+left+" , Y:"+top) ;
});
});

&lt;/script&gt;

&lt;/head&gt;
    &lt;body&gt;
        &lt;button id="down"&gt;v&lt;/button&gt; &lt;button id="up"&gt;^&lt;/button&gt;
        &lt;div class="block"&gt;&lt;/div&gt;&lt;br/&gt;
        &lt;p id="position"&gt;&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>it doesn't work as I want, I get the same result for each move: <code>X: 50 , Y:[object Window]</code><br>
How to fix that? is the functions I used <code>position().left</code> and <code>position().top</code> right to get the X, and Y of the element ?</p>
