Skip to content
A jQuery plugin which loops through characters in a string and applies an animation to it
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
README.md
jquery-chariterator-0.1.js
jquery-chariterator-min.0.1.js

README.md

charIterator

charIterator is a jQuery plugin which loops through characters of a string in an HTML element and optionally applies a function to the characters.
It also supports textnodes which include childnodes (e.g. <p>Some text with <em><strong>child</strong>ren</em> in the DOM.</p>).

Options

skipSpaces: true, // boolean, whether the function should also be applied to (white)space-characters
insertBefore: '', // text, the text (or HTML) to be inserted before the characters
insertAfter: '', // text, the text (or HTML) to be inserted after the characters
animation: function() { }, // the animation which should be run on the characters
loop: false, // bool|int, the number of times the animation should loop or true for an infinite loop
timeout: 200 // int, the timeout before the next character will be animated

Usage

The basic usage of the charIterator plugin may come in handy when you need to wrap all characters in an container. By default the plugin wraps all characters in a <span class="charIteractor-wrap"></span>.

<h1>charIterator <em>is</em> cool!</h1>

$('h1').charIterator();

Which would result in:

<span class="charIterator-wrap">c</span><span class="charIterator-wrap>h</span><span class="charIterator-wrap>a</span><span class="charIterator-wrap>r</span>...

To add an animated effect jQuery UI needs to be loaded. The wanted effect can be added through the plugin options:

<h1>charIterator <em>is</em> cool!</h1>

$('h1').charIterator({
  animation: function(char) {
    $(char).animate({
      opacity: 0.1
    }, 2000);
  }
});

Note that in order to be able to loop the animation in the above example the opacity has to be reset first:

<h1>charIterator <em>is</em> cool!</h1>

$('h1').charIterator({
  loop: true,
  animation: function(char) {
    $(char).animate({
      opacity: 0.1
    }, 2000, function() {
      $(char).animate({
        opacity: 1
      }, 2000);
    });
  }
});

Demonstration of an animation with a limited number of loops:

<h1>charIterator <em>is</em> cool!</h1>

$('h1').charIterator({
  loop: 5,
  animation: function(char) {
    $(char).animate({
      opacity: 0.1,
      fontSize: '32px'
    }, 2000, function() {
      $(char).animate({
        opacity: 1,
        fontSize: '16px'
      }, 2000);
    });
  }
});​
Something went wrong with that request. Please try again.