how to create a Typing Effect, an Eraser Effect and a Blinking Cursor using jQuery

• 23
• tutorials
• August 28th, 2009

First have a look at the demo page (opens in a new tab) to understand what we’re trying to accomplish. You can also download the tutorial’s source code.

For the blinking cursor effect, we’re going to simulate a DOS prompt. The CSS code of the tutorial is very simple. We just have to align all the paragraphs that will include the text parts in one line:

p
{
float: left;
}

The HTML code includes one paragraph that contains the characters “C:\” (the DOS prompt) and another paragraph named cursor that contains the “|” character, our cursor:

<p>C:\</p><p class="cursor">|</p>

To make the cursor blink, we will create a Javascript function named cursorAnimation(). Using jQuery’s animate() function we first make the cursor disappear setting its opacity setting to 0% and then appear again setting its opacity setting to 100%:

function cursorAnimation()
{
  $("p.cursor").animate(
  {
    opacity: 0
  }, "fast", "swing").animate(
  {
    opacity: 1
  }, "fast", "swing");
}

We want this function to run continuously from the loading of the page, so we’re going to use the jQuery’s $(document).ready() function along with the setInterval() method that calls a function at specified intervals (in milliseconds):

$(document).ready(function()
{
  setInterval ( "cursorAnimation()", 600 );
});

Now that we have the blinking cursor we’re going to create the typing effect (based on this tutorial). First, we have to alter our HTML code. We will include a paragraph called caption, a textbox so we can write our preferred caption in there and a button to test the typing effect:

<input type="text" id="userCaption" value="Type something here!" />
<input type="submit" name="submit" value="Test Typing Effect" onclick="testTypingEffect()"/>
<p>C:\</p><p class="caption"></p><p class="cursor">|</p>

First, we define the variables captionLength and caption. When pressed, the button calls the testTypingEffect() function, that sets the textbox’s value to the caption variable and then calls the type() function. The type() function uses the substr() method to cut our preferred caption one letter forward each time it’s called and type it inside the paragraph named caption. Until all the letters of the caption are typed, the type() function calls itself with a delay of 50 milliseconds using the setTimeout() method.

var captionLength = 0;
var caption = "";

function testTypingEffect()
{
  caption = $("input#userCaption").val();
  type();
}

function type()
{
  $('p.caption').html(caption.substr(0, captionLength++));
  if(captionLength < caption.length+1)
  {
    setTimeout("type()", 50);
  }
  else 
  {
    captionLength = 0;
    caption = "";
  }
}

For the eraser effect, we will alter again the html code adding another button which when pressed will call the testErasingEffect() function:

<input type="submit" name="submit" value="Test Erasing Effect" onclick="testErasingEffect()"/>

To create the eraser effect, we’ll create the reversed process. The testErasingEffect() function sets the caption paragraph’s content to the caption variable and then computes its length. If there isn’t any content, it types automatically sample content (just for testing reasons) and calls itself. Now that it has a content, it calls the erase() function which cuts letter-by-letter the caption until it’s all gone with a delay of 50 milliseconds.

function testErasingEffect()
{
  caption = $("p.caption").html();
  captionLength = caption.length;
  if (captionLength>0)
  {
    erase();
  }
  else
  {
    $('p.caption').html("You didn't write anything to erase, but ok!");
    setTimeout("testErasingEffect()", 1000);
  }
}

function erase()
{
  $('p.caption').html(caption.substr(0, captionLength--));
  if(captionLength >= 0)
  {
    setTimeout("erase()", 50);
  }
  else 
  {
    captionLength = 0;
    caption = "";
  }
}

If you haven’t done it already, have a look at the demo page (opens in a new tab) to test the effects. You can also download the tutorial’s source code.

Photo by ~Lily-D-Ray on deviantART