Effetto macchina da scrivere con jQuery

Question

Modifica: Non ho davvero fatto tutte le domande che avrei dovuto porre nella mia domanda iniziale. Per contribuire a rendere questo più facile per le persone in cerca di una risposta simile, questo è ciò che la questione ha finito per essere:

Come faccio a fare un effetto macchina da scrivere con un cursore lampeggiante che si ferma alla fine della dichiarazione, cancella la affermazione e ne scrive una nuova?

Controlla la risposta di Yoshi in basso. Si fa esattamente questo ...

Answer 1

demo: http://jsbin.com/araget/5/

plug:

(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 --> 

init:

$('#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

Aggiunta una semplice funzione, alla fine, e alcune variabili in mezzo ...

Fiddle

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