Efekt maszyny do pisania z jQuery

Question

Edycja: Nie zadawałem wszystkich pytań, które powinienem zadać w pierwotnym pytaniu. Aby pomóc to łatwiejsze dla osób poszukujących podobnej odpowiedzi, to właśnie kwestia zakończył się:

Jak zrobić efekt pisania z migającym kursorem, który pauzuje na końcu zestawienia, kasuje oświadczenie i pisze nowy?

Sprawdź odpowiedź Yoshi poniżej. Robi dokładnie to ...

Answer 1

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

wtyczki:

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

startowych:

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

Dodany prosta funkcja na końcu, a kilka zmiennych w między ...

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