mattbell87/typeout.js

## typeout.js
//Type animation
$.fn.typeout = function(duration, oncomplete)
{
    $(this).each(function()
    {
        //Grab the text
        var text = $(this).text();
        $(this).data("percent", 0);
        //Create the animation
        $(this).animate({percent: 100},
        {
            duration: duration,
            step: function(number)
            {
                //Calculate and update text
                var numletters = Math.ceil(text.length * (number * 0.01));
                var newtext = text.substr(0, numletters);
                $(this).html(newtext + "|");
            },
            complete: function()
            {
                //Remove the fake cursor and call oncomplete
                $(this).html(text);
                if (typeof oncomplete == "function")
                    oncomplete();
            }
        });
    });
    return this;
};

## usage.html
<!DOCTYPE html>
<html>
    <head>
        <title>Fade test</title>
        <script src="jquery.js"></script>
        <script src="typeout.js"></script>
        <script src="usage.js"></script>
    </head>
    <body>
        <div class="typeme">
            The quick brown fox jumps over the lazy dog.
        </div>
    </body>
</html>

## usage.js
$(document).ready(function()
{
    $('.typeme').typeout(10000); //ten seconds to complete typeout
});
	//Type animation
	$.fn.typeout = function(duration, oncomplete)
	{
	$(this).each(function()
	{
	//Grab the text
	var text = $(this).text();
	$(this).data("percent", 0);
	//Create the animation
	$(this).animate({percent: 100},
	{
	duration: duration,
	step: function(number)
	{
	//Calculate and update text
	var numletters = Math.ceil(text.length * (number * 0.01));
	var newtext = text.substr(0, numletters);
	$(this).html(newtext + "\|");
	},
	complete: function()
	{
	//Remove the fake cursor and call oncomplete
	$(this).html(text);
	if (typeof oncomplete == "function")
	oncomplete();
	}
	});
	});
	return this;
	};
	<!DOCTYPE html>
	<html>
	<head>
	<title>Fade test</title>
	<script src="jquery.js"></script>
	<script src="typeout.js"></script>
	<script src="usage.js"></script>
	</head>
	<body>
	<div class="typeme">
	The quick brown fox jumps over the lazy dog.
	</div>
	</body>
	</html>
	$(document).ready(function()
	{
	$('.typeme').typeout(10000); //ten seconds to complete typeout
	});