使用jQuery的打字機效果

Question

編輯：我沒有真正問過我在原始問題中應該提出的所有問題。爲了讓尋找類似答案的人更容易，這就是問題最終成爲的結果：

如何使閃爍的光標在語句結束時暫停，擦除聲明，並寫入一個新的？

檢查出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

添加在年底的簡單功能，以及它們之間的幾個變量...

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