Simple Text Typing Effect with jQuery

File Size: 1.36KB
Views Total: 30731
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Text Typing Effect with jQuery

An extremely simple text effect built with jQuery that displays a sequences of characters letter by letter similar to a typewriter.

See also:

How to use it:

1. Include jQuery Library on the web page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

2. The html

<p>jQueryScript.Net is one of the BEST jQuery websites that provide web designers and developers with a simple way to preview and download a variety of Free jQuery Plugins.</p>
<p class="p2"></p>

3. The javascript

<script type="text/javascript">
function changeText(cont1,cont2,speed){
	var Otext=cont1.text();
	var Ocontent=Otext.split("");
	var i=0;
	function show(){
		if(i<Ocontent.length)
		{		
			cont2.append(Ocontent[i]);
			i=i+1;
		};
	};
		var Otimer=setInterval(show,speed);	
};
$(document).ready(function(){
	changeText($("p"),$(".p2"),150); //  150 = the Delay time in milliseconds between strokes.
	clearInterval(Otimer);
});
</script>

This awesome jQuery plugin is developed by jq-school.com. For more Advanced Usages, please check the demo page or visit the official website.