Javascript Jquery div层动画问题 我刚开始学习jQuery，这个问题让我困惑不解。 我在一个容器中有'div'，当鼠标在上面时，它会调整div的大小，并将前面的div移动一定的偏移量。 在mouseout时，它通过从偏移量中减去来移动div。 这是我当前的代码： 函数调整大小（obj） { 移位（parseInt（obj.id[obj.id.length-1]）； $（“#”+obj.id）.高度（“100px”）.宽度（“100px”）； } 功能转换（id） { 对于（变量i=id+1；i
要快速修复问题，请尝试使用Javascript Jquery div层动画问题 我刚开始学习jQuery，这个问题让我困惑不解。 我在一个容器中有'div'，当鼠标在上面时，它会调整div的大小，并将前面的div移动一定的偏移量。 在mouseout时，它通过从偏移量中减去来移动div。 这是我当前的代码： 函数调整大小（obj） { 移位（parseInt（obj.id[obj.id.length-1]）； $（“#”+obj.id）.高度（“100px”）.宽度（“100px”）； } 功能转换（id） { 对于（变量i=id+1；i,javascript,jquery,Javascript,Jquery,要快速修复问题，请尝试使用.stop（true，true）在我看来，您的问题可能与两件事有关 您没有将动画排队，这意味着您将在div当前所在的位置开始一个新动画 您调用stop，这意味着它将在任何位置停止。这将不允许动画完成，并且您的div将在错误的位置停止 我刚刚复制了您的代码并添加了queue:true并删除了stop。现在，如果您尝试在div上多次移动鼠标，它们将对动画进行排队，这意味着它们移动的次数与您在其上移动的次数相同。如果您希望它们在完成一次移动后立即停止，即使鼠标在div上移动多
.stop（true，true）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="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?
**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>
函数调整大小（obj）
{
移位（parseInt（obj.id[obj.id.length-1]）；
$（“#”+obj.id）.高度（“100px”）.宽度（“100px”）；
}
功能转换（id）
{
对于（var i=id+1；我知道了，非常感谢你，老兄..我会继续努力，看看我是否能做到完美。问题是如果我在一个div上不止一次鼠标..动画会持续很多次。它应该只做一次。我会回复你的，谢谢你的快速回复！哈哈！我终于做到了..我真不敢相信我有多愚蠢..我应该让这个职位：亲戚帮我做这项工作！这是我想做的。
<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