Speed up development with full-stack environments for every branch.

Learn More

How to create a typewriter or typing effect with jQuery

Forked from How to use the jQuery UI Slider.

8444 Runs 20267 Views 7417 Copies


pg1 45

published 4 years ago

<!doctype html>

    <title>How to create a typewriter or typing effect with jQuery</title>
            text-align: center;
            font-size: 24px;


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

        We use Google's CDN to serve the jQuery js libs. 
        To speed up the page load we put these scripts at the bottom of the page 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        //define text
        var text = 'This is a typewriter effect. You can change this text easily ...';

        //text is split up to letters
        $.each(text.split(''), function(i, letter){

            //we add 100*i ms delay to each letter 

                //we add the letter to the container
                $('#container').html($('#container').html() + letter);
            }, 100*i);


Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).