title: Individually Animate Each Character on a Page
body: <p>Currently I have a mostly working script I've hobbled together. I'm doing this in multiple phases to make it as modular as possible.</p>
  
  <pre><code>//This grabs every element on page.
  $('body').find('*').each(function(){
  //This filters for text nodes only
  $(this).contents().filter(function() { return this.nodeType == Node.TEXT_NODE;       }).each(function(){
      //Wraps each text node in a span.
      $(this).wrap("&lt;span class='text'&gt;&lt;/span&gt;")
  });
  })
  //
  $('.text').each(function(){
      //Splits each text node into a character array and wraps each char in a span.
      var test = $(this).text().split('');
          var curStr = '';
          for(var i = 0; i &lt; test.length; i++){
             if(test[i] !=  " " || test[i] != ''){
              curStr = curStr + "&lt;span class='char'&gt;" +test[i] + "&lt;/span&gt;";
             } else {
              curStr = curStr + test[i];
             }
          }
          $(this).html(curStr);
  })
  </code></pre>
  
  <p>My issue come from trying to style the elements at random. I'm using the following code to do so:  </p>
  
  <pre><code>setInterval(function(){
      $($('.char')[Math.floor((Math.random()*$('.char').length)+1)]).each(function(){
          $(this).css('color', 'green');
          $(this).css('position', 'absolute');
          $(this).css('background-color', 'red');
          $(this).animate({
          top: $(window).height + 'px'
      }, 1000, 'swing', function(){$(this).remove()});
      })  
      }, 100)
  </code></pre>
  
  <p>The issue with this is, it manages to apply the color styling, but my position and animate don't seem to be working.</p>