current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I'm trying to create a simple animation in which each letter would scale one by one. Would it be possible to have a 1 second delay when adding a class in each div? Here is what i have done at the moment : JSFiddle

HTML

<div class="animation">
    <div>a</div>
    <div>n</div>
    <div>i</div>
    <div>m</div>
    <div>a</div>
    <div>t</div>
    <div>e</div>
</div>

CSS

.animate_letters{
    float:left; 
    text-transform:uppercase; 
    font-size:80px; 
    display:inline; 
    margin-right:5px;
    animation:fancytext 1s cubic-bezier(0.3, 2, 0.35, 1.45) 0s normal none 1;

}

@keyframes fancytext{
  from {
    transform: scale(0) translateX(-40%); opacity:0;
  }

  to {
    transform: scale(1) translateX(0%); opacity:1;
  }

}

JAVASCRIPT

$(document).ready(function(){
    $.each( $('.animation'), function(i, animation){
        $('div', animation).each(function(){
        $(this).addClass('animate_letters')
        })
    })
})
share|improve this question
add comment

2 Answers

up vote 2 down vote accepted

You can use setTimeout():

$(document).ready(function(){
$.each( $('.animation'), function(i, animation){
  $('div', animation).each(function(ii){
  var data = $(this);
  setTimeout( function () {
    $(data).addClass('animate_letters')
 }, ii * 1000);
})})});

Demo

Update: also you dont need two .each(). you can narrow it down to one .each() using selector $('.animation div'):

$(document).ready(function(){
 $('.animation div').each(function(ii){
 var data = $(this);
 setTimeout( function () {
  $(data).addClass('animate_letters')
 }, ii * 1000);
})});

Simplified Demo

share|improve this answer
    
thanks for the solution. One question what does the function(ii) mean? –  clestcruz Jun 3 at 3:07
    
That is the index of looped iteration. see argument in .each() function –  Milind Anantwar Jun 3 at 3:09
add comment
up vote 1 down vote

Expanding on Milind Anantwar's answer, you need to use setTimeout, but give each letter a different timeout:

$(document).ready(function(){
    $('.animation').each(function(i, animation){
        $('div', animation).each(function(j, div){
            setTimeout(function() {
                $(div).addClass('animate_letters');
            }, 1000*j);
        });
    });
});
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.