代码
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script>
var m = -1;
function start(){
m++;
if(m<7){
$("#t"+m).animate({left: 950-m*50}, 2000, 'linear', (function(m){
if(m==6) $("#text_message").text("Well done!");
})(m));
}else{
clearTimeout(set);
}
set=setTimeout("start();", 1000);
}
</script>
</head>
<body onload="start();">
<div style="background: gray; width: 1000px; height: 50px; position: absolute; left: 0px; top: 0px;">
<div id="t6" style="width: 50px; height: 50px; background: red; position: absolute; left: 0px; top: 0px;"></div>
<div id="t5" style="width: 50px; height: 50px; background: orange; position: absolute; left: 50px; top: 0px;"></div>
<div id="t4" style="width: 50px; height: 50px; background: yellow; position: absolute; left: 100px; top: 0px;"></div>
<div id="t3" style="width: 50px; height: 50px; background: lime; position: absolute; left: 150px; top: 0px;"></div>
<div id="t2" style="width: 50px; height: 50px; background: blue; position: absolute; left: 200px; top: 0px;"></div>
<div id="t1" style="width: 50px; height: 50px; background: indigo; position: absolute; left: 250px; top: 0px;"></div>
<div id="t0" style="width: 50px; height: 50px; background: purple; position: absolute; left: 300px; top: 0px;"></div>
</div>
<div id="text_message" style=" position: absolute; left: 0px; top: 50px;">Not yet!</div>
</body>
</html>
描述
这是 jQuery animate() 方法的简单示例。
我正在尝试将所有盒子移到右侧。
但我遇到的问题不是 animate() 方法，而是 text_message。
我希望在所有框完全移动到右侧后，text_message 显示“干得好!”。
不幸的是，在所有框完全移动到右侧之前，它提前显示“干得好!”。
我怎么解决这个问题？使用自调用功能有问题吗？
谢谢。
最佳答案
@MorKadosh 的解决方案效果很好，但提醒将 setTimeout 方法移到函数的开头或 if 子句中，因为当前有一个无限循环。
您调用了 else clearTimeout 但之后再次设置它...
关于javascript - 使用jQuery animate()中的自调用函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37226234/