的代码

Question

的代码

<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显示＆＃34; 做得好！＆＃34;所有箱子完全移动到右侧后。

不幸的是，在所有的盒子完全移到右侧之前，它显示了＆＃34; 做得好！＆＃34;早。

我怎么解决这个问题？使用自助呼叫功能有问题吗？

感谢。

Answer 1

来自@MorKadosh的解决方案运行良好，但提醒将setTimeout方法移动到函数的开头或if子句，因为您当前有无限循环。

你打电话给你的其他人clearTimeout但是之后再设置它......

Answer 2

您不需要像创建自调用函数那样调用完整的回调。相反，您可以使用this来访问函数范围内的动画元素：

$("#t"+m).animate({left: 950-m*50}, 2000, 'linear', function(){
  var n = $(this).attr('id').split('t')[1];
  if(n == 6)
    $("#text_message").text("Well done!");
});

您可以在此处查看一个有效的示例：https://jsfiddle.net/41gavzsx/1/

Answer 3

我找到了自己的解决方案！创造一个setTimeout对我很好，它应该需要2秒，因为你在你的右移动中做了2秒

function start(){
m++;

if(m<7){
    $("#t"+m).animate({left: 950-m*50}, 2000, 'linear', (function(m){
        if(m==6)   setTimeout(success,2000);
    })(m));
}else{
    clearTimeout(set);
}

set=setTimeout("start();", 1000);
}
function success(){
$("#text_message").text("Well done!");
}

在jQuery中使用自调用函数animate（）

的代码

的描述

3 个答案: