CODEWITHSUNDEEP
jqueryrandomjquery-animate
Jesper Ong
Jesper Ong

Reputation: 23

randomly animate individual letters

I have a sentence of words that i'm using jquery lettering to separate into individual letters.

the markup after it's processed would look like this

<div id="tagline">
<p>
<span class="char1">w</span>
<span class="char2">e</span>
<span class="char3"> </span>
<span class="char4">c</span>
<span class="char5">o</span>
</p>
</div>

etc etc

So I'm wondering how do I go about having a random letter getting animated every set interval.

like after a second, maybe 'c' fades out and in, then 'w' does that etc etc

All help appreciated! Thanks!!

Upvotes: 0

Views: 915

Answers (2)

user3748995
user3748995

Reputation: 51

Make sure your span el's are set to - opacity: 0; 

$('#tagline span').each(function(index) {
    $(this).delay(200*index).animate({'opacity' : '1'}, 250);
});

Upvotes: 0

Ry-
Ry-

Reputation: 225074

To do something at a set interval, use, um, setInterval :)

To pick a random child, use Math.random:

var letters = tagline.children();

setInterval(function() {
     letters.eq(Math.random() * letters.length | 0).fadeOut(500).fadeIn(500); // Or something
}, 1000);

Upvotes: 1

Related Questions