Question

我有4个步骤运行的动画，当4个步骤结束时，我希望它重新启动。

var aSteps = [
    {
        "x": "800",
        "y": "0"
    },
    {
        "x": "800",
        "y": "500"
    },
    {
        "x": "0",
        "y": "500"
    }, {
        "x": "0",
        "y": "0"
    }
];

var iStepsLength = aSteps.length;
for (var i = 0; i < iStepsLength; i++) 
{
    $('#P1').animate
    ({
        left: aSteps[i].x,
        top: aSteps[i].y,
     }, 1000);
}

我试过添加if语句。

if (i == 3)
{
    i=0;    
}

然后我的浏览器会崩溃，因为它无限地运行for循环。我希望你能帮助我，并告诉我我做错了什么。

Answer 1

.animate()可以进行回调，当动画结束时将调用该回调：

function animateSteps( counter ) {
    $('#P1').animate({
        left: aSteps[ counter ].x,
        top: aSteps[ counter ].y,
     }, 1000, function(){
         if (counter == 3)
         {
            counter=0;    
         }
         animateSteps( counter + 1 );
     });
}

animateSteps( 0 );

Answer 2

将for循环设置为等于函数。调用该函数，然后再次调用它。编辑：像这样：

function forloop() { 
   for (var i = 0; i < iStepsLength; i++) {
     $('#P1').animate ({ left: aSteps[i].x, top: aSteps[i].y, }, 1000); 
   }
}

然后只要你想让循环运行就可以调用函数：

for循环（）

初学者JavaScript - 重新启动我的for循环

2 个答案: