Back to General and Gameplay Programming

[web] Jquery animate problem

General and Gameplay Programming Programming

Started by ElyasMachera July 20, 2011 09:59 PM

3 comments, last by debone 12 years, 8 months ago

ElyasMachera

102

Author

July 20, 2011 09:59 PM

Hello,
I just started learning jquery and this problem baffles me
I have divs 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 the code if you are kind enough to look at it:





<html>

	<head>

		<script src="http://code.jquery.com/jquery-latest.js"></script>



		<script language="JavaScript1.2">



			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<=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<=4;i++)

				{

					$("#hello"+i).stop().animate({"left":"-=60px"},1000) ;

				}



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

			}

		</script>

	</head>



	<body>



		<h1>Hello World!</h1>

		<div id="formWrapper" style="height:180;width:530;">



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



				<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)"></div>

				<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)"></div>				

				<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)"></div>

				<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)"></div>



			</div>



		</div>



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



		</div>



	</body>

</html>

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?
And thanks

.

EDIT:
To test rapidly move mouse over the first div..

ElyasMachera

102

Author

July 20, 2011 10:15 PM

I have an idea how to solve problem
It IS because the animation hasn't completed..hence I am moving the div too early.
I just don't know how to tell the jquery to finish the animation before doing the what mouseover wants.
so maybe something



if(animationready)

	do	reshrink

skooljester

100

July 21, 2011 03:16 PM

<!DOCTYPE html>

<html>

        <head>

                <script src="http://code.jquery.com/jquery-latest.js"></script>

                <script>

                $(document).ready(function(){

                        $("#wrapper div").hover (

                                function () {

                                        $(this).stop(true,true).animate({height: "100px", width: "100px"}, { queue: true, duration: 1500 });

                                },

                                function () {

                                        $(this).stop(true,true).animate({height: "64px", width: "48px"}, { queue: true, duration: 1500 });

                                }

                        );

                });

                </script>

                <style>

                        #formWrapper {

                                height:180px;

                                width:530px;

                        }

                        #wrapper {

                                position:relative;

                                bottom:20px;

                                left:40px;

                                width:460px;

                                height:160px;

                                background:#49c057;

                        }

                        #hello1, #hello2, #hello3, #hello4 {

                                position:relative;

                                height:64px;

                                width:48px;

                                color:#FFF;

                                padding-bottom:0;

                                margin-bottom:0;

                                display:inline-block;

                        }

                        #hello1 {

                                background:#000;

                        }

                        #hello2 {

                                background:maroon;

                        }

                        #hello3 {

                                background:brown;

                        }

                        #hello4 {

                                background:#FFF;



                        }

                </style>

        </head>



        <body>



                <h1>Hello World!</h1>

                <div id="formWrapper">



                        <div id="wrapper">



                                <div id="hello1" onmouseover="resize(this);" onmouseout="shrink(this)"></div>

                                <div id="hello2" onmouseover="resize(this);" onmouseout="shrink(this)"></div>                               

                                <div id="hello3" onmouseover="resize(this);" onmouseout="shrink(this)"></div>

                                <div id="hello4" onmouseover="resize(this);" onmouseout="shrink(this)"></div>



                        </div>



                </div>



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



                </div>



        </body></html>

I too am pretty new to jQuery, but here's a quick crack I took at it. The only thing I couldn't manage was keeping the divs at the very bottom of their container.