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

香蕉法规

代码

<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>

描述

这是jQueryanimate()方法的简单示例。

我正在尝试将所有盒子移到右侧。

但是我遇到的问题不是animate()方法，而是方法text_message。

我希望所有框都完全移到右侧后，text_message显示屏“做好了！ ”。

不幸的是，在所有框都完全移到右侧之前，它早期就显示“做好！ ”。

我怎么解决这个问题？使用自调用功能有什么问题吗？

谢谢。

莫卡多什

您不需要像创建该自调用函数那样调用完整的回调。相反，您可以使用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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。