Why jQuery animation is responding very late in my program? How can i solve?
<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>
