javascript - 让文字一个字母一个字母地消失

Question

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

谢谢。

Answer 1

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

演示：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);
});

---

我只是很好奇，为你写了一个小东西..这可能是一个开端..

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

演示：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);
});