using loops in javascript

Question

i use below code to repeat a css transition but it wont work!

        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/

there is a syntax error due to a --> left somewhere, look in the console. Then it seems to work. — GameAlchemist, Aug 18 '13 at 10:17
@VincentPiel its fine! click the yellow ball! it moves! so there is no syntax error i think — hamidrezabstn, Aug 18 '13 at 10:19
well i just looked again and there's a 'Uncaught SyntaxError: Unexpected token ( ' in the console.log, because there is a !--> somewhere. I use Chrome on Mac OS, and followed your link. — GameAlchemist, Aug 18 '13 at 10:22

score 0 · Accepted Answer · edited May 23 '17 at 12:11

You may try to use setInterval(). Set a variable (e.g. var count = 0;. Check it's value in setInterval() and you may do the CSS stuff there.

You may do something like:

var interval;
var count = 0;

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

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

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

Check this SO setInterval and clearInterval example.

Edit:

I tried something quick and dirty. Check out 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, what could be the reason to execute `setTimeout()` inside a loop? — Vivek Jain, Aug 18 '13 at 10:19
can u help me with this code that i mentionend! i mean working with for or while loop! thx — hamidrezabstn, Aug 18 '13 at 10:27
@hamidrezabstn, why do you want to run it with `for` or `while` loop only? — Vivek Jain, Aug 18 '13 at 10:29
Just copy the code of one of your functions in the `countUp()` function where it shows `//CSS Stuff` and it should work for you. — Vivek Jain, Aug 18 '13 at 10:41
@hamidrezabstn, I tried it and it works for me. Check out the edited answer. *I updated this fiddle to use Jquery 1.9.1. It did not work with Jquery 2.0.2 in IE* — Vivek Jain, Aug 18 '13 at 11:14
thank u so much!!! i dont have enough rep to upvote u but i will do it in the future ;) — hamidrezabstn, Aug 18 '13 at 11:44
@hamidrezabstn good to know that it worked for you. You may accept the answer by clicking on the tick mark below the answer score. Just for other fellow StackOverflow users. — Vivek Jain, Aug 18 '13 at 11:51

using loops in javascript

1 Answers1

Edit: