jquery - 带有 jQ​​uery 序列消息的打字机效果

Question

我正在尝试使用 jquery 进行打字机效果，以在每条消息之间间隔几秒钟按顺序显示消息。

这是我的代码 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