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>
答案 0 :(得分：0)
使用.stop(true,true)
答案 1 :(得分：0)
你的问题可能与我看到的两件事情有关。
我刚刚复制了你的代码并添加了队列：true并删除了停止。现在，如果您尝试在div上移动鼠标多次，他们会将动画排队，这意味着它们将移动相同的次数。如果你希望它们在完成一次移动后立即停止，即使鼠标在它们上移动多次，你也可以通过在回调函数中调用stop来为动画调用创建一个回调函数并删除那里的任何排队动画。
继承修改后的代码：
<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