How to animate span to correct position?
<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="http://stackoverflow.com/questions/10643303/how-to-recalculate-correct-position">How to recalculate correct position</a>  </p>
</blockquote>



<p>I have been trying to achive this effect: When I hover over menu , span with class <b>"problem"</b> follows my mouse and it's expandig dynamicly (has the same width as hovered li tag). The width of my span is working OK but its position is messed up because I don't know
how to make proper calculations. <br/><i><b>Try to hover over my menu to see the problem.</b></i>
<br/><a href="http://jsfiddle.net/w3DrE/" rel="nofollow">FIDDLE HERE</a> <br/>Does anybody knows how to solve this problem or point me in the right direction? </p>

<pre><code>  $(document).ready(function(){
    $('.menu ul li').hover(function(){
        var index=$(this).index();
        var width=$(this).outerWidth();        
        $('.problem').stop().animate({'marginLeft':135*index+195,'width':width},1000);     
    });
});
</code></pre>
