title: JavaScript rectangle follow cursor in menu
body: <p>I wrote a code in JS for my future site and it's all fine but the only bad thing here is in menu the rectangle (div) moves with brakes. I mean it must be like in a site some features of which I want to have on my own. <a href="http://lusens.ru/" rel="nofollow noreferrer">http://lusens.ru/</a> There on main menu the rectangle mouse very smoothly. I can't understand why in my case it doesn't happen.</p>
  <p>This is a part of html</p>
  <pre><code>&lt;body&gt;
      &lt;ul &gt;           
          &lt;li id=&quot;a1&quot; onmouseover=&quot;highlightMenu('a1')&quot;&gt;Первый пункт&lt;/li&gt;
          &lt;li id=&quot;a2&quot; onmouseover=&quot;highlightMenu('a2')&quot;&gt;Второй пункт точка&lt;/li&gt;
          &lt;li id=&quot;a3&quot; onmouseover=&quot;highlightMenu('a3')&quot;&gt;Третьий пункт точка и запятая&lt;/li&gt;
          &lt;li id=&quot;a4&quot; onmouseover=&quot;highlightMenu('a4')&quot;&gt;Четвёртый пункт&lt;/li&gt;
      &lt;/ul&gt;
  &lt;div id=&quot;d1&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>and the JS file</p>
  <pre><code>function highlightMenu(id) {
      time = 0;
      
  
      var rect = document.getElementById(id).getBoundingClientRect();
      var width = document.getElementById(id).offsetWidth;
      var idTop = rect.top;
      var idLeft = rect.left;
  
      var rect1 = document.getElementById('d1').getBoundingClientRect();
      var shadowWidth = document.getElementById('d1').offsetWidth;
      var shadowLeft = rect1.left;
      var shadowTop = rect1.top;
  
     
      if (shadowLeft &lt; idLeft) {
          for (i = shadowLeft, time = 50; i &lt; idLeft - 3; i++, time += 5) {
              setTimeout(&quot;document.getElementById('d1').style.left='&quot; + i + &quot;px'&quot;, time);
          }
      } else {
          for (i = shadowLeft, time = 50; i &gt; idLeft - 3; i--, time += 5) {
              setTimeout(&quot;document.getElementById('d1').style.left='&quot; + i + &quot;px'&quot;, time);
          }
      }
              
      if (shadowWidth &lt; width) {
          for (i = shadowWidth; i &lt; width + 10; i++, time += 0.01) {
              setTimeout(&quot;document.getElementById('d1').style.width='&quot; + i + &quot;px'&quot;, time);
          }
      } else {
          for (i = shadowWidth; i &gt; width + 10; i--, time += 0.01) {
              setTimeout(&quot;document.getElementById('d1').style.width='&quot; + i + &quot;px'&quot;, time);
          }
      }
  
  
      if (shadowLeft &lt; idLeft) {
  
          for (i = idLeft + 3; i &lt; idLeft + 20; i++, time += 25) {
              setTimeout(&quot;document.getElementById('d1').style.left='&quot; + i + &quot;px'&quot;, time);
  
          }
          for (i = idLeft + 20; i &gt; idLeft - 5; i--, time += 50) {
              setTimeout(&quot;document.getElementById('d1').style.left='&quot; + i + &quot;px'&quot;, time);
  
          }
      } else {
          for (i = idLeft - 3; i &gt; idLeft - 20; i--, time += 25) {
              setTimeout(&quot;document.getElementById('d1').style.left='&quot; + i + &quot;px'&quot;, time);
  
          }
          for (i = idLeft - 20; i &lt; idLeft - 5; i++, time += 50) {
              setTimeout(&quot;document.getElementById('d1').style.left='&quot; + i + &quot;px'&quot;, time);
  
          }
  
      }
  }
  </code></pre>
  <p><a href="http://jsfiddle.net/m2SBm/" rel="nofollow noreferrer">http://jsfiddle.net/m2SBm/</a></p>