Question

我正在尝试创建一个jQuery函数，逐字逐句地拼出我的名字。我的名字是Jake，所以我希望它从零开始，然后它会显示J，然后是Ja，然后是Jak，然后是杰克。我们只是说我正在修改一个带有类名的段落元素：

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

我尝试过使用.delay（）函数和setTimeout（）函数，但我是jQuery的新手，所以我可能错了。

$(document).ready(function()
{
    setTimeout(function(){$(".name").text('J');}, 500);
    setTimeout(function(){$(".name").text('Ja');}, 500);
    setTimeout(function(){$(".name").text('Jak');}, 500);
    setTimeout(function(){$(".name").text('Jake');}, 500);

});

这是我最近尝试的一个小问题：

http://jsfiddle.net/pg7Cu/

这只是延迟500毫秒，然后一次输入我的名字。我试图让它每500毫秒输入一个字母。有人可以帮我弄清楚如何做到这一点吗？

Answer 1

只需使用recursive function：

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

JSFiddle demo

我们可以略微扩展这一点，以便通过将iteration函数添加为typeName函数中的第一行来删除最初传入var iteration = iteration || 0;变量的需要：

typeName("My name here");

现在您只需致电：

{{1}}

JSFiddle demo

Answer 2

实际上你也可以只使用css，不需要javascript / jQuery。

<强> HTML

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

<强> CSS

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

Demo

Answer 3

这是一个简单的：

http://jsfiddle.net/pg7Cu/7/

var text = "Hello what's up?";

function letter() {
    var oldt = $(".name").text(); // grab old text
    var t = text.charAt(0); // grab first text's letter
    text = text.substr(1); // shorten the text

    $(".name").text(oldt + t); // show old text + the one letter

    // if there's anything left to type, continue.
    if(text.length > 0) setTimeout(letter, 100);
}


$(document).ready(function()
{
    setTimeout(letter, 100);
});

它设置一个字母的超时，当显示该字母时，如果有更多字母，它会再次设置超时。递归类型。

Answer 4

你很亲密。首先增加超时;当计时器立即开始运行时：

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

并且不要将时间上的差异设置为完全相同（因为人们不会每隔x ms不按一次键）

查看修订版：http://jsfiddle.net/pg7Cu/1/

你可以创建更漂亮的代码等等，但这很有效。

修改

好的，我接受了挑战;）查看 this Fiddle 。您可以使用自己的字符串调用函数simulateTyping()，并以随机的间隔附加下一个字符，直到整个字符串出现在屏幕上。你甚至可以从它创建一个插件（通过硬编码应该附加文本的元素）。

function simulateTyping(myString, currentChar) { var delay = Math.floor(Math.random()*(250-50+1)+50); // random between 50 and 250 milliseconds currentChar = currentChar || 0; setTimeout(function() { $('.name').append(myString.charAt(currentChar)) if(++currentChar < myString.length) { simulateTyping(myString, currentChar); } }, delay); }

Answer 5

您可以尝试不同的超时：

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

你会如何使用jQuery创建“打字”效果？

5 个答案:

Demo