jQuery: animating text

Animating text is easy with jQuery. Let's say that we want to show the letters of an heading one at time and then apply a global, final effect to the heading itself. All we need are a couple of CSS rules and a little bit of imagination. Done that, everything will work smoothly. First, let's draw our markup structure:

 <span class="t1">T</span>
 <span class="t2">i</span>
 <span class="t3">t</span>
 <span class="t4">l</span>
 <span class="t5">e</span>

Each letter is contained within a span element. To make everything work faster, we've embedded such elements directly in the markup, but you can use jQuery to generate them. Then our CSS styles:

h1 {
 font: 10em Impact, sans-serif;
 padding: 0.5em;
 text-transform: uppercase;
 letter-spacing: .1em;
 background: #000;
 color: #c60;
 margin: 0 auto;
 width: 4em;

h1 span {
 display: none;

Since we want to apply some transition effects to the background color of our element, we need to reference the jQuery UI library as well:

<!--page contents-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js">


After setting everything up, we can use jQuery:

$(document).ready(function() {

  $('h1 span.t1').fadeIn(1500, function() {
    $(this).next().fadeIn(1500, function() {
      $(this).next().fadeIn(1500, function() {
        $(this).next().fadeIn(1500, function() {
          $(this).next().fadeIn(1500, function() {
              backgroundColor: '#fff',
              color: '#000',
              fontSize: '120px'
            }, 2000);


You can see the demo below.


Live demo

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.