在javascript中使用循环

我使用下面的代码来重复css转换，但它不起作用

        for (var i=0 ; i<4 ; i++){ 
       setTimeout(function() {
        $('#top-left').css('margin', '45px 0 0 45px');
        $('#top-mid').css('margin', '45px 0 0 90px');   
        $('#top-right').css('margin', '45px 0 0 135px');
        $('#mid-right').css('margin', '90px 0 0 135px'); 
        $('#bot-right').css('margin', '135px 0 0 135px');
        $('#bot-mid').css('margin', '135px 0 0 90px');
        $('#bot-left').css('margin', '135px 0 0 45px');
        $('#mid-left').css('margin', '90px 0 0 45px');            
    }, 4500);  

        setTimeout(function() {
        $('#top-left').css('margin', '180px 0 0 180px');
        $('#top-mid').css('margin', '180px 0 0 90px');  
        $('#top-right').css('margin', '180px 0 0 0');
        $('#mid-right').css('margin', '90px 0 0 0');
        $('#bot-right').css('margin', '0 0 0 0');
        $('#bot-mid').css('margin', '0 90px 0 90px');
        $('#bot-left').css('margin', '0 180px 0 180px');
        $('#mid-left').css('margin', '90px 0 0 180px');             
    }, 9000);

    };

---

对于（var i=0；i您可以尝试使用
setInterval（）
。设置一个变量（例如
var count=0；
。在
setInterval（）
中检查它的值，您可以在那里执行CSS操作

你可以这样做：

var interval;
var count = 0;

function onloadFunctions()
{
    interval = setInterval(countUp, 4500);
}

function countUp()
{
    count++;
    // CSS Stuff

    if(count == 4)
    {
        clearInterval(interval);
    }
}

检查这个例子


编辑：
我试过一些又快又脏的东西。看看：

您想实现什么？由于某个地方留下了-->而导致语法错误，请查看控制台。然后它似乎可以工作。@PatrickEvans我想进行如下加载animation@VincentPiel很好！点击黄色的球！它移动了！所以没有语法错误，我想我只是再看一次，有一个“未捕获的语法错误：意外标记”（'在console.log中，因为某个地方有一个！-->。我在Mac OS上使用Chrome，并遵循您的链接。@PatrickEvans，执行
setTimeout（）的原因可能是什么
在循环中？我应该如何使用它！请详细说明！你能帮我处理我提到的这段代码吗结束！我的意思是使用for或while循环！thx@hamidrezabstn，为什么你想用
for
或
运行它，而
只循环？因为我是新手！：（你能帮我吗？
var interval4500;
var interval9000;
var count4500 = 0;
var count9000 = 0;

$(function () {
    $('#top-left').click(function () {
        $(this).css('margin', '0 0 0 0');
        $('#top-mid').css('margin', '0 90px 0 90px');
        $('#top-right').css('margin', '0 180px 0 180px');
        $('#mid-right').css('margin', '90px 0 0 180px');
        $('#bot-right').css('margin', '180px 0 0 180px');
        $('#bot-mid').css('margin', '180px 0 0 90px');
        $('#bot-left').css('margin', '180px 0 0 0');
        $('#mid-left').css('margin', '90px 0 0 0');
    });
    interval4500 = setInterval(countUp4500, 4500);
    interval9000 = setInterval(countUp9000, 9000);
});

function countUp4500() {
    count4500++;
    $('#top-left').css('margin', '45px 0 0 45px');
    $('#top-mid').css('margin', '45px 0 0 90px');
    $('#top-right').css('margin', '45px 0 0 135px');
    $('#mid-right').css('margin', '90px 0 0 135px');
    $('#bot-right').css('margin', '135px 0 0 135px');
    $('#bot-mid').css('margin', '135px 0 0 90px');
    $('#bot-left').css('margin', '135px 0 0 45px');
    $('#mid-left').css('margin', '90px 0 0 45px');

    if (count4500 == 4) {
        clearInterval(interval4500);
    }
}

function countUp9000() {
    count9000++;
    $('#top-left').css('margin', '180px 0 0 180px');
    $('#top-mid').css('margin', '180px 0 0 90px');
    $('#top-right').css('margin', '180px 0 0 0');
    $('#mid-right').css('margin', '90px 0 0 0');
    $('#bot-right').css('margin', '0 0 0 0');
    $('#bot-mid').css('margin', '0 90px 0 90px');
    $('#bot-left').css('margin', '0 180px 0 180px');
    $('#mid-left').css('margin', '90px 0 0 180px');

    if (count9000 == 4) {
        clearInterval(interval9000);
    }
}