jQuery animte position left top with hover
<p>basically when I hover normally over the box it moves and goes back to the position but when you hover fast several times box goes backwards and loses position, any idea why? Thanks!</p>

<p>Also I need to grab current div position so im using <code>$(this)</code> when hover.</p>

<p>here is the code: <a href="http://jsfiddle.net/JdMqM/1/" rel="nofollow">http://jsfiddle.net/JdMqM/1/</a></p>

<p>html:</p>

<pre><code>&lt;div class="box_wrap"&gt;
    &lt;div class="box"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>css:</p>

<pre><code>.box_wrap {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
    margin: 10px;
}

.box {
    top: 0;
    left: 0;
    background: green;
    position: absolute;
    width: 200px;
    height: 200px;
}
</code></pre>

<p>js:</p>

<pre><code>$('.box').hover(

  function(){
    var h = $(this).height();
    var w = $(this).width();
    var t = $(this).position().top;
    var l = $(this).position().left;

    $(this).animate({
      'width': w + 20 + 'px',
      'height': h + 20 + 'px',
      'left': l + 20,
      'top': t + 20
    }, { duration: 200, queue: false });
  },

  function(){
    var h = $(this).height();
    var w = $(this).width();
    var t = $(this).position().top;
    var l = $(this).position().left;

    $(this).animate({

      'width': w - 20 + 'px',
      'height': h - 20 + 'px',
      'left': l - 20,
      'top': t - 20
    }, { duration: 200, queue: false });
  }
);
</code></pre>
