使用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