How To Pause Or Delay Animation Using Javascript/jquery

Here is the text animation I am doing: http://jsfiddle.net/4DJe6/ I want the animation to pause for a second so the user can read the full text in red once and then it should start

Solution 1:

The following should do it:

var red = document.getElementById('red');
    red.style.width = "0px";
var black = document.getElementById('black');

// Add Var to Keep Track of Pausevar pauser = 0;

var animation = setInterval(function(){
    if(red.style.width == "288px"){
        pauser += 34; // Increase Pause// Pause is Greater Than 1sif (pauser >= 1000){
            red.style.width = "0px"; // Reset Animation
            pauser = 0; // Reset Pause
        }
    } else {
        red.style.width = parseInt(red.style.width,10)+1 +"px";
    }
}, 30);

Updated Fiddle Here.

I Hope this helps!