使文字逐字逐渐消失

Question

我是JavaScript和jQuery开发的新手，我想问一下使用JavaScript逐字逐句消失html文本的最简单方法是什么？

感谢。

Answer 1

由于我更加好奇，我想我创造了你正在寻找的那个，

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);
});

---

我只是好奇并为你写了一件小事......这可能是一个初学者......

基本上它是一个逐字逐句删除的计时器。见下文。

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);
});