Question

I am new to JavaScript and jQuery development and I want to ask what is the most simple way of making html text slowly disappear letter by letter using JavaScript?

Thanks.

Answer 1

Since I got even more curious, I think I created the exact one that you are looking for,

DEMO: http://jsfiddle.net/DbknZ/3/

$(function() {
  var $test = $('#test');
  var initText = $.trim($test.text()), ptr = 0;
  var timer = setInterval(function() {
    var ln = $.trim($test.find('.trans').text().length);
    if (ln == initText.length) {
        $test.empty();
        clearInterval(timer);
    }

    $('#test').html(function() {    

        return $('<span>').addClass('removeMe')
            .html(initText.substring(ptr++ , ptr))
            .before($('<span>').addClass('trans').
                   html(initText.substring(0 , ptr-1)))
            .after(initText.substring(ptr));
    }).find('span.removeMe').animate({'opacity': 0}, 10);

  }, 20);
});

---

I just got curious and wrote a small thing for you.. which could be a starter..

Basically it is a timer which removes letter by letter.. See below.

DEMO: http://jsfiddle.net/TTv7L/1/

HTML:

<div id="test">
   This is a test page to demonstrate text disapper letter by letter
</div>

JS:

$(function () {
    var $test = $('#test');
    var timer = setInterval( function () {
        var ln = $test.text().length;
        if (ln == 0) clearInterval(timer);

        $('#test').text(function (i, v) {
            return v.substring(1);
        });
    }, 100);
});