javascript - 在 JavaScript 中使用循环

Question

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

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