Jquery div layers animate problem
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:
<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="posit开发者_运维问答ion: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?
**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:
<code>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript1.2">
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<=4;i++)
$("#hello" + i).animate({"left": "-=52px", queue: true},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:100px;bottom:0px;width:100px; background-color:black;color:white;" onmouseover="resize(this);" ></div>
<div id="hello2" style="position:absolute;left:102px;bottom:0px;height:64px;width:48px; background-color:maroon;color:white;" onmouseover="resize(this);" ></div>
<div id="hello3" style="position:absolute;left:152px;bottom:0px;height:64px;width:48px; background-color:brown;color:white;" onmouseover="resize(this);" ></div>
<div id="hello4" style="position:absolute;left:202px;bottom:0px;height:64px;width:48px; background-color:white;color:white;" onmouseover="resize(this);" ></div>
</div>
</div>
<div id="testvalue" style="position:absolute;top:390px;background-color:yellow;height:100px;width:400px;">
</div>
</body>
</html>
</code>
for a quick fix try using .stop(true,true)
Your problem is probably related to two things as I see it.
- you are not queueing the animations, which means you will start a new animation at the position the div is currently at.
- You call stop which means it will stop whereever it is. This will not allow the animation to complete and your div will stop in the wrong position
I just copied your code and added queue: true and removed the stop. Now if you try to move the mouse many times over the divs they will queue up the animations, which means they will move the same number of times that you move over them. If you want them to stop immediately after completing one move even if the mouse moves multiple times over them you can create a callback function to the animate call and remove any queued animations there, by calling stop inside the callback function.
Heres the modified code:
<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).animate({"left":"+=60px", queue: true},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).animate({"left":"-=60px", queue: true},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>
enter code here
加载中,请稍侯......
精彩评论