Show text letter by letter

If a smooth reveal is reasonable then I think this should be pretty straightforward. Untested, but this is how I imagine it would work

html

<div id="text"><span>The intergalactic space agency</span></div>

css

div#text { width: 0px; height: 2em; white-space: nowrap; overflow: hidden;  }

jQuery

var spanWidth = $('#test span').width();
$('#text').animate( { width: spanWidth }, 1000 );

Okay, I couldn't resist and made a fiddle. One little code error that I fixed. Looks good to me though!

http://jsfiddle.net/mrtsherman/6qQrN/1/


HTML

<div id="msg"/>

Javascript

var showText = function (target, message, index, interval) {   
  if (index < message.length) {
    $(target).append(message[index++]);
    setTimeout(function () { showText(target, message, index, interval); }, interval);
  }
}

Call with:

$(function () {
  showText("#msg", "Hello, World!", 0, 500);   
});