title: Why jQuery animation is responding very late in my program? How can i solve?
body: <p>I wrote a program to animate a div content. This is working according to the mouse position. On <code>mousemove</code> event, if mouse position is more than 1/3 of window height content will animate to up (content will appears). Otherwise it will animate to downside (disappears). The program is giving proper result but it is taking time. I think the animate function is calling multiple times.</p>
  
  <p>How can I improve the code?</p>
  
  <p>Please check the code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;            
              var ww;
              var wh;
              var moverHeight="150";
              var moveRespondPosition;
  
              $(document).ready(function()
              {
                  ww=$(window).width();
                  wh=$(window).height();
  
                  $("#mover")
                  .css("height",moverHeight)
                  .css("bottom",-moverHeight);
  
                  moveRespondPosition=wh-(wh/3);
  
                  $(document).mousemove(function(e)
                  {
                      var mousePosition=e.pageY;
                      if(mousePosition&gt;moveRespondPosition)
                      {
                          setTimeout('animateElem(0)',100);
  
                      }
                      else
                      {                        
                          setTimeout('animateElem(-moverHeight)',100);
                      }
                  }); 
              });
  
              function animateElem(value)
              {
                  $("#mover").animate
                  ({
                      "bottom":value
                  });
              }
  
          &lt;/script&gt;
  
          &lt;style type="text/css"&gt;
              *
              {
                  padding: 0px;
                  margin: 0px;
              }
              body
              {
                  overflow-y: hidden;
              }
              #wraper
              {
                  width: 100%;
                  height: 100%;
                  position: relative;
              }
  
              #mover
              {
                  width: 100%;                
                  background-color: #192B44;
                  position: absolute;                
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="wraper"&gt;
              &lt;div id="mover"&gt;
                  Content
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>