Question

考虑以下功能：

$("document").ready(function(){
    var echoText = 'Hello world!';
    echoText = echoText.split('');
    $.each(echoText, function(key, value){
        $("#content").append(value);
    });
});

这简单地回显了输入文本。但是，我想要做的是在回显的每个角色之间添加一个延迟，所以它看起来像是一个缓慢的人类打字。任何想法如何进行？我试过谷歌搜索，但到目前为止没有任何帮助。

Answer 1

打字机插件

外观

http://onehackoranother.com/projects/jquery/jquery-grab-bag/text-effects.html

使用ike

$("#my-container").typewriter();

您可以从Here

下载

 $.fn.typewriter = function() {
        this.each(function() {
            var $ele = $(this), str = $ele.text(), progress = 0;
            $ele.text('');
            var timer = setInterval(function() {
                $ele.text(str.substring(0, progress++) + (progress & 1 ? '_' : ''));
                if (progress >= str.length) clearInterval(timer);
            }, 100);
        });
        return this;
    };

Answer 2

考虑使用setTimeout()功能：

$("document").ready(function(){
    var data = 'Hello world!';
    var lastIndex = 0;

    var fnEcho = function() {
        if (lastIndex < data.length) {
            $("#content").append(data[lastIndex]);
            lastIndex++;

            window.setTimeout(fnEcho, 1000);
        }
    }

    fnEcho();
});

Answer 3

$("document").ready(function(){
    var echoText = 'Hello world!';
    var currentChar = 0;
    var intval = setInterval(function(){
        var value = echoText.charAt(currentChar);
        $("#content").append(value);
        currentChar++;
        if(currentChar >= echoText.length){
            clearInterval(intval);
        }
    }, 10);
});

我还没有测试过，所以它可能是错误的，但这是做到这一点的方法。您可以增加值10以减慢文本速度。

Answer 4

$("document").ready(function(){
  var echoText = 'Hello world!';
  echoText =echoText.split('');
  $.each(echoText, function(key, value){
    setTimeout(function(){
        $("#content").append(value);
    }, key * 1000);
  });
});

Answer 5

试试这个：

var printNextChar = function(theStr, pos){
    pos = (typeof(pos) == 'undefined') ? 0 : pos;
    $('#content').append(theStr.substr(pos,1));
    ++pos;
    if(pos <= theStr.length){
        setTimeout(function(){printNextChar(theStr,(pos));},300);    
    }
}

$("document").ready(function(){
    var echoText = 'Hello world!';
    printNextChar(echoText);

});

jsFiddle example

Answer 6

以下是使用$.animate和step

的解决方案

function SimulateTyping(containerID, data) {
    var dv = $('#' + containerID), len = data.length;
    dv.text("");
    $({count: 0}).animate({count: len}, {
        duration: len * 15,
        step: function() {
            dv.text(data.substring(0, Math.round(this.count)));
        }
    });
}

称之为

SimulateTyping("content", someText);

演示：http://jsfiddle.net/naveen/JAxU9/

如何将延迟合并到每个循环的jquery中？

6 个答案: