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.
Lo siguiente debe hacerlo:
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);
El violín actualizado aquí .
¡Espero que esto ayude!