Question

I’d like to achieve an animation/sequence like this:

the animation starts with a loop (imagine a car moving from x1 to x2) then a pause of 1 second then again the animation (imagine a car moving from x2 to x3 etc)

the car loop is achieved adding 1px to the car left: value

but i cant figure out the nested loop how should work

i’m trying to do ti only using setInterval, no jquery

UPDATE: sorry i wasnt clear

but assume we have

var animation = setInterval(car_moves, 10);

how do i trigger this animation every 2 seconds, and the animation should last 0.5sec ?

Answer 1

Look, this is done with jQuery http://jsfiddle.net/qCx69/

$('img').animate({left: '100px'}, 2000, function() {
    $(this).delay(1000).animate({left: '300px'}, 2000);
});

interacting with

<img src='http://boydstire.com/img/car_img.jpg' id='car'
     style='position:absolute;left:0px;top:100px;'>

or without it (this one is not an optimized solution)
http://jsfiddle.net/8bZTA/1/

var timer = setInterval(function(){
    update_car(100,1);
}, 50);

function update_car(x,path)
{
  var car = document.getElementById('car'), 
      pos = parseInt(car.style.left) + 1;
  car.style.left = pos + 'px';
  if (pos > x)  
  {
      clearInterval(timer);
      if (path!=2)
      {
      setTimeout(function(){ //pause
       timer = setInterval(function(){update_car(200,2);}, 50);}
           , 5000);
      }
  }
}

Updated:

You can even make a set of stops and motions (it can be update for variable speed too)
http://jsfiddle.net/hFH4U/5/

var timer = setInterval(function(){update_car();}, 50);

var path = {'path1': 100, 'pause1': 2000, 'path2': 200, 
               'pause2': 2000, 'path3': 220}, 
                cur_step = 0, steps = [], speed = 1;
for (var i in path)  steps.push(i);

function update_car()
{
  var car = document.getElementById('car'), 
      pos = parseInt(car.style.left);
  if (/^path/.test(steps[cur_step]))
  {
      // motion part
      if (pos > path[steps[cur_step]])
          cur_step++;
  }
  if (/^pause/.test(steps[cur_step]))
  {
      clearTimeout(timer);
      setTimeout(function(){ 
        cur_step++;
        timer = setInterval(function(){ update_car(); }, 50);
      }, path[steps[cur_step]]);
  }
  if (cur_step >= steps.length) // end animation
      clearInterval(timer);

   car.style.left = (pos + speed) + 'px';
}