使用jQuery键入文本动画 [英] Typing text animation using jQuery

问题描述

希望有人能帮助我。我对jQuery有点新，但我试图找出一种方法来为整个div类创建一个动画键入文本效果！长谷歌搜索只给了我很小的插件，虽然他们是伟大的......他们只是不做我需要他们做...（或我只是没有教育，设置它）...

基本上，一旦页面加载，我需要一个完整的预先存在的div类在一个html块（我不想要的文本提供的JS ）开始以人类的方式输入文本，保留内部元素（h1s，h2s，p，span等）的所有CSS，并按照它们在页面流中的顺序。

这是我正在处理的文件
http：/ /jsfiddle.net/we9d81jf/

  var $ el = $（'。typing'），
 txt = $ el.text（），
 txtLen = txt.length，
 timeOut，
 char = 0; 
 
 $ el.text（'|'）; 
 
（function typeIt（）{
 var humanize = Math.round（Math.random（）*（200  -  30））+ 30; 
 timeOut = setTimeout ）{
 char ++; 
 var type = txt.substring（0，char）; 
 $ el.text（type +'|'）; 
 typeIt（）; 
 
 if（char == txtLen）{
 $ el.text（$ el.text（）。slice（0，-1））; //删除'|'
 clearTimeout（timeOut）; 
} 
 
}，humanize）; 
 
}（））; 
  

任何帮助都将非常感谢！

解决方案

为什么不使用jQuery插件，如 Typed.js 。它工作完美，'<'和'>'将不会显示。您还可以深入了解源代码，了解

这是一个演示（字符串包含< br> ，您可以添加一些标签来测试它）。

hopefully someone can help me with this. I am kinda new to jQuery, but I'm trying to figure out a way to create an animated typing text effect for an entire div class! A long google search has only given me small plugins, although they are great... They just don't do what I need them to do… (or I just don't have the education to set it up)…

Basically, as soon as the page loads I need to have an entire pre-existing div class inside a block of html (I don't want the text to be provided by the JS) start to ‘type’ out the text as a human would, keeping all CSS of the internal elements (h1s, h2s, p, spans, etc.) and in the order that they are in the flow of the page.

This is the file I'm working on http://jsfiddle.net/we9d81jf/

var $el = $('.typing'),
    txt = $el.text(),
    txtLen = txt.length,
    timeOut,
    char = 0;

$el.text('|');

(function typeIt() {   
    var humanize = Math.round(Math.random() * (200 - 30)) + 30;
    timeOut = setTimeout(function() {
        char++;
        var type = txt.substring(0, char);
        $el.text(type + '|');
        typeIt();

        if (char == txtLen) {
            $el.text($el.text().slice(0, -1)); // remove the '|'
            clearTimeout(timeOut);
        }

    }, humanize);

}());

Any help would be greatly appreciated!

解决方案

Why don't use jQuery plugin such as Typed.js. It works perfect, the '<' and '>' won't display. You can also dive into the source code to find out how it work.

This is a demo(The string contains <br> and you can add some tag to test it).

这篇关于使用jQuery键入文本动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！