在 javascript 中使用循环答案

【问题标题】：using loops in javascript在 javascript 中使用循环
【发布时间】：2013-08-18 10:13:31
【问题描述】：

我使用下面的代码来重复 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);

    };

http://jsfiddle.net/hamidrezabstn/JCE7t/1/

【问题讨论】：

你想达到什么目的？
有一个语法错误，由于 --> 留在某处，请查看控制台。然后它似乎工作了。
@PatrickEvans 我想做一个类似加载的动画
@VincentPiel 很好！点击黄色球！它动了！所以我认为没有语法错误
好吧，我又看了一遍，console.log 中有一个 'Uncaught SyntaxError: Unexpected token ('，因为有一个 !--> 某处。我在 Mac OS 上使用 Chrome，并按照你的链接。

标签： javascript jquery css css-transitions

【解决方案1】：

您可以尝试使用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);
    }
}

检查此SO setInterval and clearInterval 示例。

编辑：

我尝试了一些又快又脏的东西。查看this fiddle:

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);
    }
}

【讨论】：

@PatrickEvans，在循环中执行 setTimeout() 的原因可能是什么？
我应该如何使用它！详细说明！
你能帮我解决我提到的这段代码吗？我的意思是使用 for 或 while 循环！谢谢
@hamidrezabstn，为什么你只想用for 或while 循环运行它？
因为我是新手！ :(你能帮我吗？