JavaScript setTimeout() Method on Animation

I have three yellow bars and each of them needs to come from left to right. For that, I have produced this code, but it only works on the last one. Can anyone correct this code; I need to work with pure JavaScript. I am not using any framework. Thanks.

window.onload = function(){  

    var yellowTitles = document.getElementById('magazine-brief').getElementsByTagName('h2');

    for(开发者_如何学Ci=0; i< yellowTitles.length; i++) {
        var header = yellowTitles[i];
        var timer = i*500;
        var yellowBar = setTimeout(animeYellowBar,timer);

        function animeYellowBar(){
           header.style.left= "0";
        }

    }

}

Here's how I'd solve the problem:

var yellows = document.getElementById('magazine-brief').getElementsByTagName('h2');

// this will force the header number to be bound correctly
// also animates the div across the page by tracking the current position of x
function createMotion(num){
  var currPos = 0;//current x position
  var delta = 10;//move by this amount
  setInterval(function(){
    currPos += delta
    yellows[num].style.left = currPos;
  }, num * 500);
}

for (var i = 1; i < yellows.length; i++)
{
  createMotion(i);
}

Note the function "createMotion" - added so the number "i" is correctly reference in the setInterval function.

Shouldn't you be incrementing your CSS left value instead of just setting it to 0? Why have a timeout at all if you're just going to set the value without gradually incrementing or decrementing?

If you do actually want to use a gradual animation, look at this tutorial : http://www.schillmania.com/content/projects/javascript-animation-1/

Very descriptive and possibly what you want.

By the time your timeout function runs, header refers to your last h2.

Try editing your timeout function to this:

function animeYellowBar(){
       var thisheader=header;
       thisheader.style.left= "0";
    }

var yellows = document.getElementById('magazine-brief').getElementsByTagName('h2');

for (var i = 0; i < yellows.length; i++)
{
    (function(idx, el){
        window.setTimeout(function(){
            var interval = window.setInterval(function(){
               el.style.left = parseInt(el.style.left) + 10; // adjust this movement step
               if (parseInt(el.style.left) >= 0)
               {
                   el.style.left = 0;
                   window.clearInterval(interval);
               }
            }, 100); // adjust this number for animation speed
        }, (idx++) * 500);
    })(i, yellows[i]);
}