jQuery的打字机效果

编辑：我并不是真的问了我原本应该问的所有问题。为了让寻找类似答案的人更容易找到答案，问题的最终结果是：

如何使闪烁的光标在语句末尾暂停、擦除语句并写入新语句，从而产生打字机效果？

看看下面Yoshi的答案。它确实做到了…

演示：

/***插件***/
（函数（$）{
//写入字符串
//
//@param jQuery$target
//@param字符串str
//@param数值光标
//@param数字延迟
//@param函数cb
//@返回无效
函数类型字符串（$target，str，cursor，delay，cb）{
$target.html（函数（\ux，html）{
返回html+str[cursor]；
});
如果（光标1）{
setTimeout（函数（）{
deleteString（$target，delay，cb）；
}，延误）；
}否则{
cb（）；
}
}
//jQuery钩子
$.fn.extend({
电传打字机：功能（opts）{
var设置=$.extend（{}，$.teletype.defaults，opts）；
返回$（this）.each（函数（）{
（函数循环（$tar，idx）{
//类型
typeString（$tar，settings.text[idx]，0，settings.delay，function（））{
//删除
setTimeout（函数（）{
deleteString（$tar，settings.delay，function（））{
循环（$tar，（idx+1）%settings.text.length）；
});
}，设置。暂停）；
});
}（$（本），0））；
});
}
});
//插件默认值
$扩展({
电传打字机：{
默认值：{
延误：100，
暂停：5000，
案文：[]
}
}
});
}（jQuery））；
/***初始化***/
$（'#target'）。电传打字({
正文：[
“Lorem ipsum dolor sit amet，Conseteteur sadipscing Eliter，”，
“在劳动和就业方面的临时不可抗力”，
“在vero eos等地的大教堂里，有一个巨大的教堂，
“两个多洛雷斯和一个重罪的受害者”，
“古伯格伦，没有大海，塔基马塔圣所是一个多洛雷姆·伊普苏姆·多洛尔·希特”，
“amet.Lorem ipsum Door sit amet，Conseteteur sadipscing Eliter，”，
“在劳动和就业方面的临时不可抗力”，
“在vero eos和accusam的大教堂里，有一个大教堂，
“这是两个多洛雷斯和一个重建者，斯特克里塔·卡斯德·古伯格伦，”，
“没有大海，塔基马塔圣所是一个伟大的圣殿。”
]
});
$（'#光标'）。电传打字({
正文：[“uuu”，“uu”]，
延迟：0，
暂停：500
});
在末尾添加了一个简单的函数，中间添加了一些变量


您还可以查看我的插件jquerytypewriter，它完全满足您的需要

它可能没有那么多功能，但值得一看

它有一个闪烁的光标，彩色文本等，都可以定制

以下是链接：
Yoshi……你真厉害！这正是我想要做的。不过，还有一件事，你知道我是如何在第二个例子显示下划线的地方发布小提琴的。这在代码中也很容易实现吗？另外，我需要更改哪个值以使其在擦除之前暂停更长时间？我希望它在每条消息上至少停留几秒钟。我更改的每一个数字都只是让字母打字或倒转更快…并没有造成停顿，所以我想这还没有设置为延迟。它可能只是在完成后立即运行delete函数，对吗？我还在努力学习，jQuery，如果这个问题很愚蠢，我很抱歉。是的，目前没有暂停，但这应该不难实现。围绕
deleteString的一个简单的
setTimeout
(（$tar，setting…
应该可以。我可以在变量中添加HTML吗？例如，
反面效果很好！我想Yoshi已经完全了解了我的意图，但你肯定也提供了很好的输入。谢谢！我可以在变量中添加HTML吗？@Blackbenzkid不是现在的样子，它只会将HTML作为文本输出。你可以吗如果你愿意的话，你可以修改它。如果需要的话，你可以设计主容器的样式。为什么是jQuery！？这只能用CSS完成！
var where, when; //added

$.fn.teletype = function(opts){
    var $this = this,
        defaults = {
            animDelay: 50
        },
        settings = $.extend(defaults, opts);

    var letters = settings.text.length; //added

    where = '#' + $($this).attr('id'); //added
    when = settings.animDelay; //added

    $.each(settings.text, function(i, letter){
        setTimeout(function(){
            $this.html($this.html() + letter);

            if( $($this).html().length == letters ){ reverse(); } // Added to trigger reversing function

        }, settings.animDelay * i);
    });
};

$(function(){
    $('#container').teletype({
        animDelay: 100,
        text: 'Now is the time for all good men to come to the aid of their country...'
    });
});


// Added Reversing Function

    function reverse(){

        if ($(where).html().length > 0){          
            x = $(where).html().length - 1;
            y = $(where).html().substr(0, x);
            $(where).html(y);
            setTimeout(reverse , when);
        }else{
            console.log('Reverse Complete');
            clearTimeout(reverse);
        }
    }