Javascript Jquery-循环内部动画方法

我有下面的循环，从1到100计数

我想在这个循环中使用动画方法来平滑地移动图片，即通过改变图片的顶部和左侧属性

虽然我可以让图片移动，但它可以在一个不稳定的动画中移动。我可能有点笨，但它似乎在一次点击中执行所有动画，而不是逐渐执行

这与javascript是异步的有关吗

还有一种方法可以让我在Javascript中重复一些东西，即不设置循环，还有一种方法可以让函数在结束时调用自己，因此，例如，我可以显示动画div，这些div会不断反弹等等。此时，我必须设置一个预定义的循环

for (i=1; i < 100; i++) {
    var FirstTop = (FirstTop + FirstTopGoal);
    var FirstLeft= (FirstLeft+ (FirstLeftGoal));
    var SecondTop = (SecondTop+ (SecondTopGoal));
    var SecondLeft = (SecondLeft + (SecondLeftGoal));
    if (FirstTop<100){Firsttop=100;FirstTopGoal    = 2 - Math.random()*4;};
    if (FirstLeft<50){FirstLeft=50;FirstLeftGoal    = 2 - Math.random()*4;};
    if (FirstTop>130){Firsttop=130;FirstTopGoal    = 2 - Math.random()*4;};
    if (FirstLeft>500){Firsttop=500;FirstLeftGoal    = 2 - Math.random()*4;};
    $("#first").animate(
        {top: FirstTop,left:FirstLeft},
        {duration: 0,
        easing: "linear"}
    );
};

（i=1；i<100；i++）的

{
var FirstTop=（FirstTop+FirstTopGoal）；
var FirstLeft=（FirstLeft+（FirstLeftGoal））；
var SecondTop=（SecondTop+（SecondTopGoal））；
var SecondLeft=（SecondLeft+（SecondLeftGoal））；
如果（FirstTop500）{Firsttop=500；FirstLeftGoal=2-Math.random（）*4；}；
$（“#第一”）。制作动画(
{top:FirstTop，left:FirstLeft}，
{持续时间：0，
“线性”}
);
};

此代码应能解决您的问题：

var i = 1;
var interval = setInterval(function(){
    if(i < 100) {
        i++;

        var FirstTop = (FirstTop + FirstTopGoal);
        var FirstLeft= (FirstLeft+ (FirstLeftGoal));
        var SecondTop = (SecondTop+ (SecondTopGoal));
        var SecondLeft = (SecondLeft + (SecondLeftGoal));
        if (FirstTop<100){Firsttop=100;FirstTopGoal    = 2 - Math.random()*4;};
        if (FirstLeft<50){FirstLeft=50;FirstLeftGoal    = 2 - Math.random()*4;};
        if (FirstTop>130){Firsttop=130;FirstTopGoal    = 2 - Math.random()*4;};
        if (FirstLeft>500){Firsttop=500;FirstLeftGoal    = 2 - Math.random()*4;};

        $("#first").animate(
            { top: FirstTop, left:FirstLeft}, 
            {duration: 0, easing: "linear"}
        );
    }
    else if(i == 100){
        clearInterval(interval);
    }
}, 1);

var i=1；
var interval=setInterval（函数（）{
如果（i<100）{
i++；
var FirstTop=（FirstTop+FirstTopGoal）；
var FirstLeft=（FirstLeft+（FirstLeftGoal））；
var SecondTop=（SecondTop+（SecondTopGoal））；
var SecondLeft=（SecondLeft+（SecondLeftGoal））；
如果（FirstTop500）{Firsttop=500；FirstLeftGoal=2-Math.random（）*4；}；
$（“#第一”）。制作动画(
{top:FirstTop，left:FirstLeft}，
{持续时间：0，线性}
);
}
否则如果（i==100）{
间隔时间；
}
}, 1);

对循环使用

setInterval

而不是

。您可以在JSFIDLE上看到一个示例

如果指定延迟为0，则
for
循环的速度也比
setInterval
快。这是因为
setInterval
的最小延迟值为4ms。
再看看这个问题：
您已经将动画持续时间设置为0，所以我不知道您为什么希望它显示平滑的动画。jQuery动画自动放置在队列中，因此信号量基本上不起任何作用。@Juhana您说得对！对不起，我忘了这个特点。我将更新删除信号量的代码。