打字机效果与jQuery

编辑：我没有真正问我原来的问题，我应该问的所有问题。 为了让寻求类似答案的人更容易，这就是问题的结果：

如何使用在语句结束处暂停的闪烁光标实现打字机效果，擦除语句并写入新语句？

看看Yoshi的回答如下。 它确实是…

Answer 1

演示： http : //jsbin.com/araget/5/

插件 ：

(function ($) { // writes the string // // @param jQuery $target // @param String str // @param Numeric cursor // @param Numeric delay // @param Function cb // @return void function typeString($target, str, cursor, delay, cb) { $target.html(function (_, html) { return html + str[cursor]; }); if (cursor < str.length - 1) { setTimeout(function () { typeString($target, str, cursor + 1, delay, cb); }, delay); } else { cb(); } } // clears the string // // @param jQuery $target // @param Numeric delay // @param Function cb // @return void function deleteString($target, delay, cb) { var length; $target.html(function (_, html) { length = html.length; return html.substr(0, length - 1); }); if (length > 1) { setTimeout(function () { deleteString($target, delay, cb); }, delay); } else { cb(); } } // jQuery hook $.fn.extend({ teletype: function (opts) { var settings = $.extend({}, $.teletype.defaults, opts); return $(this).each(function () { (function loop($tar, idx) { // type typeString($tar, settings.text[idx], 0, settings.delay, function () { // delete setTimeout(function () { deleteString($tar, settings.delay, function () { loop($tar, (idx + 1) % settings.text.length); }); }, settings.pause); }); }($(this), 0)); }); } }); // plugin defaults $.extend({ teletype: { defaults: { delay: 100, pause: 5000, text: [] } } }); }(jQuery)); 

html ：

 <span id="target"></span> <span id="cursor"></span> <!-- used for the blinking cursor effect --> 

初始化 ：

 $('#target').teletype({ text: [ 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,', 'sed diam nonumy eirmod tempor invidunt ut labore et dolore', 'magna aliquyam erat, sed diam voluptua. At vero eos et', 'accusam et justo duo dolores et ea rebum. Stet clita kasd', 'gubergren, no sea takimata sanctus est Lorem ipsum dolor sit', 'amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,', 'sed diam nonumy eirmod tempor invidunt ut labore et dolore', 'magna aliquyam erat, sed diam voluptua. At vero eos et accusam', 'et justo duo dolores et ea rebum. Stet clita kasd gubergren,', 'no sea takimata sanctus est Lorem ipsum dolor sit amet.' ] }); $('#cursor').teletype({ text: ['_', ' '], delay: 0, pause: 500 }); 

Answer 2

最后添加了一个简单的函数，以及一些variables之间…

小提琴

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