jQuery序列消息的打字机效果

Question

我正在尝试用jquery实现Typewriter效果，以按顺序显示消息，每条消息之间间隔几秒。

这是我的代码jsfiddle

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);    
        }, settings.animDelay * i);
    });
};
$(function(){
    $('#container1').teletype({
        animDelay: 100,
        text: 'This is message 1'
    });
     $('#container2').teletype({
        animDelay: 100,
        text: 'this is message 2'
    });
});

但问题是，我的消息一起运行

如何控制消息之间的时间？

Answer 1

JSFiddle更新：http://jsfiddle.net/dnkwp/19/

以及下方的代码

var where, when, iteration; //added
iteration = 0;
bigDelay = 0;
$.fn.teletype = function(opts){
    iteration++;
    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
    if (iteration > 1)
    {
        bigDelay = bigDelay + settings.text.length * settings.animDelay;
        setTimeout(function () {
                $.each(settings.text, function(i, letter){
        setTimeout(function(){
            $this.html($this.html() + letter);

        }, settings.animDelay * i);
    });
        }, bigDelay);
    }
    else
    {
    $.each(settings.text, function(i, letter){
        setTimeout(function(){
            $this.html($this.html() + letter);

        }, settings.animDelay * i);
    });
    }
};
$(function(){
    $('#container1').teletype({
        animDelay: 100,
        text: 'This is message 1'
    });
     $('#container2').teletype({
        animDelay: 100,
        text: 'this is message 2'
    });
     $('#container3').teletype({
        animDelay: 100,
        text: 'this is message 3'
    });
     $('#container4').teletype({
        animDelay: 100,
        text: 'this is message 4'
    });
});

// Added Reversing Function