Jquery/CSS sequential element animation with callback

Question

I am writing a script that will animate a set of jQuery Elements, but I'm running into some issues. Here are my requirements:

Sequential animations
Callback functionality after all animations are complete. Callback can be defined globally
Animation works on floated elements with
Entire solution can be js/jquery/css or a combination

Here's what I've gotten so far: http://jsfiddle.net/fmpeyton/cqAws/

HTML

<div class="block">Im a box</div>
<div class="block">me too</div>
<div class="block">and me!</div>
<div class="block">am I?</div>
<div class="block">yes.</div>
<div class="block">Im a box</div>
<div class="block">me too</div>
<div class="block">and me!</div>
<div class="block">am I?</div>
<div class="block">yes.</div>
<div class="block">Im a box</div>
<div class="block">me too</div>
<div class="block">and me!</div>
<div class="block">am I?</div>
<div class="block">yes.</div>

CSS

.block{
    float:left;
    width:100px;
    background: red;
    margin: 0 10px;
    padding: 10px;
}
.hiddenForAnimation{ opacity:0; margin-top:-20px; }

JS

$(function(){
    $('.block').addClass('hiddenForAnimation').each(function(i){
        var delay = i * 200,
            animationSpeed = 800;
        $(this).delay(delay).animate({opacity: '1', marginTop: '0px'
        }, animationSpeed, function(){ if(typeof afterPageAnimation === 'function' && i === $(this).length){ setTimeout(afterPageAnimation, delay + animationSpeed);} $(this).removeClass('hiddenForAnimation').attr('style',''); });
    });
});

function afterPageAnimation(){ alert('animation is done!'); }

My issues:

Is there a better way to refactor this JS script to be sequential? Using delay() is effective, but not elegant.
The callback is not being executed directly after the animations
When the last element in a row finishes animating, the first element in the next row starts at the far right, then jumps to the left (I suspect margin-top has something to do with this.)

Thanks!

Well, .hiddenForAnimation{ opacity:0; margin-top:0px; } will get rid of the jumping. You can also remove the line that sets margin top from js — Huangism
– Huangism, Commented Jul 19, 2013 at 19:54

Kevin Cittadini · Accepted Answer · 2013-07-20 07:50:00Z

3

This works

http://jsfiddle.net/cqAws/12/

Remember: In positioning animations, use position:relative or position:absolute and play with top, left, right, bottom instead of margins. It's better

EDIT: made it a little better.

edited Jul 20, 2013 at 7:50

answered Jul 19, 2013 at 20:08

Kevin Cittadini

1,4791 gold badge22 silver badges30 bronze badges

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

2 Comments

Fillip Peyton Over a year ago

Awesome! I initially tried using top, but had no luck. That's because I didn't position:relative. D'oh! The only point this answer doesn't go over is whether or not there is a better way to refactor?

omma2289 Over a year ago

why use another counter variable when you have the index argument in the loop? just check if(i == $('.block').length-1)

pirs · Accepted Answer · 2013-07-19 22:59:07Z

1

new

$(function(){
    j=0;
    $('.block').each(function(i){
        var interv = +(i*800);
        var animationSpeed = 800;

        $(this).toggleClass('hiddenForAnimation')
               .delay(interv)
               .animate({opacity: '1', marginTop: '0'},animationSpeed,function(){
                   j++;
                   $(this).delay(+(interv+animationSpeed))
                          .toggleClass('hiddenForAnimation')
                          .attr('style','');
                          if(j>=+($('.block').length)) afterPageAnimation();

               });
    });
});

function afterPageAnimation(){ alert('cool'); }

FIDDLE

edited Jul 19, 2013 at 22:59

answered Jul 19, 2013 at 20:03

pirs

2,4612 gold badges20 silver badges25 bronze badges

2 Comments

Fillip Peyton Over a year ago

Did you change the markup at all? I'm getting a different result. All elements are animating in at once. See: jsfiddle.net/fmpeyton/tUN9c

Fillip Peyton Over a year ago

afterPageAnimation() is not firing =X

Fillip Peyton · Accepted Answer · 2013-10-22 00:03:59Z

0

For future viewers:

I've solved this by creating a small Jquery plugin found here: https://github.com/fillswitch/Jquery-Sequential-Animations

Hope this helps some other users in the future!

answered Oct 22, 2013 at 0:03

Fillip Peyton

3,6674 gold badges36 silver badges61 bronze badges

Collectives™ on Stack Overflow

Jquery/CSS sequential element animation with callback

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related