animate every char of an html element text using jquery?

Question

i want to animate a string of text taken from an html element using jquery:

<h1>Animate</h1>

for the jquery part:

$(document).ready(function() {

$( "h1" ).animate({ fontSize: "90px" }, 1500 )
     .animate({ fontSize: "50px" }, 1500 );

});

this animates the whole h1 text value, however i want to animate each character in the h1 text.

the second jquery part:

$(document).ready(function () {

    var animateChar = $("h1").text();
    for(i=0; i<animateChar.length; i++) {

        //alert(i + ': ' + animateChar.charAt(i));
        // for every animateChar.charAt[i] want to run this
        //jquery animation.
        //$( "h1" ).animate({ fontSize: "90px" }, 1500 )
        //.animate({ fontSize: "50px" }, 1500 );

        }
 });

this is the bit where im stuck. thanks

you'll have to wrap each character in a span - text nodes are indivisible. — Alnitak
– Alnitak, Commented Jul 23, 2012 at 15:07
I'm not sure that's possible without separating out every character in to another container such as a <span>. I guess you could do that first, then loop through them. — Vala
– Vala, Commented Jul 23, 2012 at 15:07

score 6 · Accepted Answer · 2012-07-23 15:19:25Z

6

You can use jQuery functions on DOM elements. Not on characters apart. You should use different DOM elements for each character:

<span>A</span><span>N</span><span>I</span>...

with something like this must do the trick

$('span').each(function() {
    var that = $(this);
    setTimeout(function() { 
        that.animate({ fontSize: "90px" }, 1500 )
            .animate({ fontSize: "50px" }, 1500 );
    },that.index()*100);
});

-edit-

working jSFIDDLE

-edit 2-

without messy HTML JSFIDDLE(well it's still messy, but javascript makes it messy ;) )

edited Jul 23, 2012 at 15:19

answered Jul 23, 2012 at 15:09

user657496

Sign up to request clarification or add additional context in comments.

2 Comments

Marakoss Over a year ago

I agree. But don't flood your html code with such unsemantical stuff. Use lettering.js tool.

user657496 Over a year ago

@Marakoss True. Made an edit (still making my HTML messy on clientside) with readable template html

Vala · Accepted Answer · 2012-07-23 15:14:20Z

0

If you want to keep your HTML clean, I'd add the following method to wrap your characters in span tags. Execute this onLoad using wrapCharacters($("h1")) before you animate anything, then animate characters returned by $(".animate").

function wrapCharacters(obj)
{
    var html = '';
    var text = obj.text();
    for (var i = 0; i < text.length; i++)
    {
        html += '<span class="animate">' + text[i] + '</span>';
    }
    obj.html(html);
}

answered Jul 23, 2012 at 15:14

Vala

5,7041 gold badge32 silver badges56 bronze badges

2 Comments

unknown Over a year ago

can you clarify using this more!!

Vala Over a year ago

At the start of the function run onLoad execute this on any of the elements you want to animate like this (wrapCharacters($("h1")) is fine if you only have one h1 tag, otherwise loop them and do wrapCharacters on each one - you can use $.each for this), it should wrap all characters in a container with a span of the appropriate class, then use rsplak's answer on how to animate those spans.

ExceptionLimeCat · Accepted Answer · 2012-07-23 15:43:37Z

0

<span class="animate">A</span><span class="animate">n</span><span class="animate">i</span><span class="animate">m</span><span class="animate">a</span><span class="animate">t</span><span class="animate">e</span>

$(document).ready(function() {

   var count = 0;       

   function animation(elm) {
       if(count == $(".animate").length)
       {
          clearInterval(id);
          return;
       }

       $( elm ).animate({ fontSize: "90px" }, 1500 )
     .animate({ fontSize: "50px" }, 1500 );
     count++;
   }

   var id = setInterval(animation($(".animate")[count]), 3200);//Give time for animation to run.

});

This will animate each character.

edited Jul 23, 2012 at 15:43

answered Jul 23, 2012 at 15:10

ExceptionLimeCat

6,4407 gold badges48 silver badges77 bronze badges

1 Comment

unknown Over a year ago

this deosnt animate letters, it animates all of them at once! :))

Collectives™ on Stack Overflow

animate every char of an html element text using jquery?

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related