jQuery: a little WTF text animation :)

jquer.ba-wtf-animation.js

// Iterate over a bunch of elements.
$(":header, p, li").each(function() {
  // The current element.
  var elem = $(this);
  // A copy of the current element that will take its place in the DOM during
  // the animation.
  var copy = elem.clone().replaceAll(elem);
  // The element's text content. To be animated, character-by-character.
  var text = copy.text();
 
  // Set a completely made up CSS property on the element. While this does
  // absolutely nothing visually (the browser ignores it), it's still a value
  // that jQuery can animate.
  copy.css({fakeProperty: 0})
    // Animate that property from the current value (0) to the new value (1).
    .animate({fakeProperty: 1}, {
      // Animate over a few seconds.
      duration: 3000,
      // Using a custom easing function.
      easing: "swing",
      // For each animation "tick" execute this function.
      step: function(pct) {
        copy.text(text.slice(0, Math.floor(text.length * pct)));
      },
      // When the animation is all done, replace the copy with the original!
      complete: function() {
        copy.replaceWith(elem);
      }
    });
});