Jquery div layers animate problem
<pre><code>I just started learning jQuery and this problem baffles me.


I have `div`s in a container and when the mouse is over them it resizes the div and shifts the divs in front by a certain offset.
On mouseout, it shifts the div by subtracting from that offset. 

This is my current code:

    &lt;html&gt;
        &lt;head&gt;
            &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;

            &lt;script language="JavaScript1.2"&gt;

                function resize(obj)
                {
                    shift(parseInt(obj.id[obj.id.length-1]));
                    $("#"+obj.id).height("100px").width("100px") ;

                }

                function shift(id)
                {
                    for(var i=id+1;i&lt;=4;i++)
                    {
                        $("#hello"+i).stop().animate({"left":"+=60px"},1000) ;
                    }
                }

                function shrink(obj)
                {
                    $("#"+obj.id).height("64px").width("48px") ;
                    reshrink(parseInt(obj.id[obj.id.length-1]));

                }
                function reshrink(id)
                {
                    document.getElementById('testvalue').innerHTML+=document.getElementById("hello2").style.left ;

                    for(var i=id+1;i&lt;=4;i++)
                    {
                        $("#hello"+i).stop().animate({"left":"-=60px"},1000) ;
                    }

                    document.getElementById('testvalue').innerHTML+=document.getElementById("hello2").style.left ;
                }
            &lt;/script&gt;
        &lt;/head&gt;

        &lt;body&gt;

            &lt;h1&gt;Hello World!&lt;/h1&gt;
            &lt;div id="formWrapper" style="height:180;width:530;"&gt;

                &lt;div id="wrapper"  style="position:relative;bottom:20px;width:460px;left:40px;height:160px;background-color:green;overflow:auto;" "&gt;

                    &lt;div id="hello1" style="position:absolute;left:0px;height:64px;bottom:0px;width:48px; background-color:black;color:white;" onmouseover="resize(this);" onmouseout="shrink(this)"&gt;&lt;/div&gt;
                    &lt;div id="hello2" style="position:absolute;left:49px;bottom:0px;height:64px;width:48px; background-color:maroon;color:white;" onmouseover="resize(this);" onmouseout="shrink(this)"&gt;&lt;/div&gt;                  
                    &lt;div id="hello3" style="position:absolute;left:98px;bottom:0px;height:64px;width:48px; background-color:brown;color:white;" onmouseover="resize(this);" onmouseout="shrink(this)"&gt;&lt;/div&gt;
                    &lt;div id="hello4" style="position:absolute;left:147px;bottom:0px;height:64px;width:48px; background-color:white;color:white;" onmouseover="resize(this);" onmouseout="shrink(this)"&gt;&lt;/div&gt;

                &lt;/div&gt;

            &lt;/div&gt;

            &lt;div id="testvalue" style="position:absolute;top:390px;background-color:yellow;height:100px;width:400px;"&gt;

            &lt;/div&gt;

        &lt;/body&gt;
    &lt;/html&gt;

It is quite simple really, nothing too complicated in it.


What I found is that when the mouseover and out is rapid or maybe the animation isn't complete - the divs change more than the offset and eventually it overlaps.
Can someone please suggest how to solve this problem?

**EDIT:**

To test, rapidly move mouse over the first div.

EDIT:
After following Tommy's advice...I'm still having problems with it..the same error. I don't know whether to make a new thread, but here is modified code:

&lt;code&gt;
&lt;html&gt;
            &lt;head&gt;
                    &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;

                    &lt;script language="JavaScript1.2"&gt;
                            var shouldMove = true,currPrev=1,canShrink=false,attachedId=0 ;
                            function resize(obj)
                            {

                                         attachedId=parseInt(obj.id[obj.id.length - 1]);
                                        if(currPrev!=attachedId)
                                        {   
                                            $("#hello"+currPrev).height("64px").width("48px");                                                                  
                                            reshrink();

                                            if(attachedId!=4)
                                                shift(4);
                                            else                                            
                                                resizeImg();

                                            currPrev = attachedId;
                                        }


                            }
                            function resizeImg()
                            {
                                $("#hello"+attachedId).height("100px").width("100px");
                            }
                            function shift(id)
                            {           
                                if(id!=attachedId+1)
                                    $("#hello" + id).animate({"left": "+=52px", queue: true},function(){shift(--id)});
                                else
                                    $("#hello" + id).animate({"left": "+=52px", queue: true},function (){resizeImg()});

                            }


                            function reshrink()
                            {
                                document.getElementById("testvalue").innerHTML+=document.getElementById("hello2").style.left;
                                for(var i=currPrev+1;i&lt;=4;i++)
                                    $("#hello" + i).animate({"left": "-=52px",  queue: true},1000);

                                document.getElementById("testvalue").innerHTML+=document.getElementById("hello2").style.left;
                            }       


                     &lt;/script&gt;
            &lt;/head&gt;

            &lt;body&gt;

                    &lt;h1&gt;Hello World!&lt;/h1&gt;
                    &lt;div id="formWrapper" style="height:180;width:530;"&gt;

                            &lt;div id="wrapper"  style="position:relative;bottom:20px;width:460px;left:40px;height:160px;background-color:green;overflow:auto;" "&gt;

                                    &lt;div id="hello1" style="position:absolute;left:0px;height:100px;bottom:0px;width:100px; background-color:black;color:white;" onmouseover="resize(this);" &gt;&lt;/div&gt;
                                    &lt;div id="hello2" style="position:absolute;left:102px;bottom:0px;height:64px;width:48px; background-color:maroon;color:white;" onmouseover="resize(this);" &gt;&lt;/div&gt;                               
                                    &lt;div id="hello3" style="position:absolute;left:152px;bottom:0px;height:64px;width:48px; background-color:brown;color:white;" onmouseover="resize(this);" &gt;&lt;/div&gt;
                                    &lt;div id="hello4" style="position:absolute;left:202px;bottom:0px;height:64px;width:48px; background-color:white;color:white;" onmouseover="resize(this);" &gt;&lt;/div&gt;

                            &lt;/div&gt;

                    &lt;/div&gt;

                    &lt;div id="testvalue" style="position:absolute;top:390px;background-color:yellow;height:100px;width:400px;"&gt;

                    &lt;/div&gt;

            &lt;/body&gt;
    &lt;/html&gt;
&lt;/code&gt;
</code></pre>
