Эффект пишущей машинки с сообщениями последовательности jQuery

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