Javascript 您将如何创建一个；打字；使用jQuery的效果如何？

我正在尝试创建一个jQuery函数，它可以逐字拼写出我的名字。我的名字是Jake，所以我希望它一开始什么都没有，然后它会显示一个J，然后是Ja，然后是Jak，然后是Jake。假设我正在修改一个具有类名的段落元素：

<p class=Name> *name gets 'typed' here* </p>

以下是我最近的一次尝试：

---

这只会延迟500毫秒，然后一次键入我的名字。我试着让它每500毫秒打一个字母。有人能帮我弄清楚怎么做吗？

您可以尝试不同的超时：

setTimeout(function(){$(".name").text('J');}, 500);
setTimeout(function(){$(".name").text('Ja');}, 1000);
setTimeout(function(){$(".name").text('Jak');}, 1500);
setTimeout(function(){$(".name").text('Jake');}, 2000);

---

你很接近。从增加超时开始；当计时器立即开始运行时：

setTimeout(function(){$(".name").text('J');}, 500);
setTimeout(function(){$(".name").text('Ja');}, 1000);
// etc

并且不要将时间差设置得完全相同（因为人们不会经常每隔x毫秒按一次键）

查看修订版：

您可以创建更漂亮的代码等等，但这是可行的

编辑

好的，我接受了挑战；）查看。您可以使用自己的字符串调用函数

simulateping（）

，并以随机间隔追加下一个字符，直到整个字符串出现在屏幕上。您甚至可以从中创建一个插件（通过不硬编码文本应该附加到的元素）

函数模拟ping（myString，currentChar）{
var delay=Math.floor（Math.random（）*（250-50+1）+50）；//在50到250毫秒之间随机
currentChar=currentChar | | 0；
setTimeout（函数（）{
$（'.name'）.append（myString.charAt（currentChar））
if（++currentChar

这里有一个简单的例子：

它为一个字母设置超时，当显示该字母时，如果有更多的字母，它将再次设置超时。某种递归。

只需使用：

我们可以稍微扩展它，以消除最初传入

迭代

变量的需要，方法是在

typeName

函数中添加该变量作为第一行：

var iteration = iteration || 0;

现在，您可以简单地调用：

typeName("My name here");

---

.

实际上，您也可以只使用css来完成，不需要javascript/jQuery

HTML

<p class="text">Jack.</p>

---

是的，您已经将所有函数的延迟设置为500毫秒，因此它们都发生在500毫秒。假设您不是作为学习执行者来执行此操作：这太糟糕了。更好的办法是使用“递归”并在每个字母打印后设置新的超时。是的，但这只是一个例子哈哈，看看复选标记OP显然不关心“混乱”或某种可恢复的代码：p@user3330644看看其他答案中的一个：它们肯定更有用！嗯，这没那么糟吧？你能解释一下投票结果吗？也许我甚至可以从中学到一些东西；）首先，伙计们，我真的不介意被否决，但我真的不明白为什么这会是一个糟糕的答案：它是可重用的，它有工作演示。如果你投了反对票，至少告诉我为什么，这样我和其他读过这个答案的人就可以知道为什么这是一个糟糕的解决方案。

var name = "Jake";

function typeName(name, iteration) {
    // Prevent our code executing if there are no letters left
    if (iteration === name.length)
        return;

    setTimeout(function() {
        // Set the name to the current text + the next character
        // whilst incrementing the iteration variable
        $('.name').text( $('.name').text() + name[iteration++] );

        // Re-trigger our function
        typeName(name, iteration);
    }, 500);
}

// Call the function to begin the typing process
typeName(name, 0);

var iteration = iteration || 0;

typeName("My name here");

<p class="text">Jack.</p>

.text
{
    width: 30em;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 5s steps(50, end);
    animation: type 5s steps(50, end);
}

@keyframes type{
    from { width: 0; }
}

@-webkit-keyframes type{
    from { width: 0; }
}