Type Writer Effect

by Aldi Unanto

HTML

<div id="container"></div>

JavaScript

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