Cómo pausar o retrasar la animación usando JavaScript / jquery

Aquí está la animación de texto que estoy haciendo: http://jsfiddle.net/4DJe6/

Quiero que la animación se detenga por un segundo para que el usuario pueda leer el texto completo en rojo una vez y luego debe comenzar:

Cualquier sugerencia, ¿cómo puedo añadir una segunda pausa?

Aquí está el código: HTML

Waiting for the task!Waiting for the task! 

CSS

 #black{ color:black; font-weight:bold; font-size:2em; } #red { position:absolute; z-index:10; left:0px; width:0px; overflow:hidden; font-weight:bold; font-size:2em; color:red; white-space:nowrap; } div { display: inline-block; position: relative; } html { text-align: center; } 

JS

 var red = document.getElementById('red'); var black = document.getElementById('black'); red.style.width = "0px"; var animation = setInterval(function(){ console.log(red.style.width); if(red.style.width == "288px") { red.style.width = "0px";} red.style.width = parseInt(red.style.width,10)+1 +"px";},30); 

Hazme saber si necesitas cualquier otra información.

Por favor recomiende.

 var red = document.getElementById('red'); red.style.width = "0px"; var black = document.getElementById('black'); // Add Var to Keep Track of Pause var pauser = 0; var animation = setInterval(function(){ if(red.style.width == "288px"){ pauser += 34; // Increase Pause // Pause is Greater Than 1s if (pauser >= 1000){ red.style.width = "0px"; // Reset Animation pauser = 0; // Reset Pause } } else { red.style.width = parseInt(red.style.width,10)+1 +"px"; } }, 30);