Running JQuery animations in sequence

Question

I am trying to run jquery animations in sequence but cannot seem to get it working...

// Run this animation first hiding fading all divs but selected one

if (divid!= '1') { $('#div1').animate({ 'opacity': 0 }, 500); }
if (divid!= '2') { $('#div2').animate({ 'opacity': 0 }, 500); }
if (divid!= '3') { $('#div3').animate({ 'opacity': 0 }, 500); }
if (divid!= '4') { $('#div4').animate({ 'opacity': 0 }, 500); }
if (divid!= '5') { $('#div5').animate({ 'opacity': 0 }, 500); }

once all the above animations have finished do the next lot...

if (cargroup != '1') { $('#div1').hide(500); }
if (cargroup != '2') { $('#div2').hide(500); }
if (cargroup != '3') { $('#div3').hide(500); }
if (cargroup != '4') { $('#div4').hide(500); }
if (cargroup != '5') { $('#div5').hide(500); }

and so on...

May need some more code here. Where do you get divid and cargroup from? You can just pass the id and animate the right div instead of checking for each like that. Can you provide any more info/expand on your question? — Steve O
– Steve O, Commented Jan 26, 2012 at 18:34

ShankarSangoli · Accepted Answer · 2012-01-26 18:35:43Z

2

Set the queue property of the aninmate method to true. It will animate in sequence. Try this

if (divid!= '1') { $('#div1').animate({ 'opacity': 0 }, { queue: true, duration: 500 }); }
if (divid!= '2') { $('#div2').animate({ 'opacity': 0 }, { queue: true, duration: 500 }); }
if (divid!= '3') { $('#div3').animate({ 'opacity': 0 }, { queue: true, duration: 500 }); }
if (divid!= '4') { $('#div4').animate({ 'opacity': 0 }, { queue: true, duration: 500 }); }
if (divid!= '5') { $('#div5').animate({ 'opacity': 0 }, { queue: true, duration: 500 }); }

answered Jan 26, 2012 at 18:35

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

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

5 Comments

Eric Hodonsky Over a year ago

This will queue each animation, he wants them to execute in groups.

ShankarSangoli Over a year ago

@Relic - I think thats what OP is looking for.

Eric Hodonsky Over a year ago

@ShankarSangoli what's "OP"... and he clearly has them in groups and wants one set to fire after the other.

ShankarSangoli Over a year ago

@Relic - OP is the one who has asked this question. Yes, in each group there is a condition and only one will be true I believe.

Eric Hodonsky Over a year ago

@ShankarSangoli Ah, okay so yeah as only one actually gets executed, but I thought okenshield asked. Anyways it'll kinda work, the code is just so messy, like you shouldn't have to parse all that code to also parse the data. Reference my Answer (and due to his naming schema for IDs and Wrappers also is part of the problem)

Eric Hodonsky · Accepted Answer · 2012-01-26 19:10:47Z

1

You have a couple options... Try this first { queue: true, duration: 500 } in place of the 500, then try and clean up your logic a little to something more like below.

I have no way of testing this, but it should give you the idea. And to be honest, I would add a class to all those divs like ".togglers" then do something like this. And as they're clearly all divs.... try this

$(".togglers").each(function(){
    if(divid!=$(this).attr("id")){
        $(this).animate({ 'opacity': 0 }, 500);
    }
});
$(".togglers").each(function(){
    if(cargroup!=$(this).attr("id")){
        $(this).hide(500);
    }
});

edited Jan 26, 2012 at 19:10

answered Jan 26, 2012 at 18:42

Eric Hodonsky

5,9974 gold badges28 silver badges36 bronze badges

Comments

Chris Nash · Accepted Answer · 2012-01-26 18:36:44Z

0

They won't run in sequence if you do this. All you're doing is queueing the animation and hide effects until control gets back to jQuery - which probably means the blocks just end up hiding. What you need is for each animation to pass a callback function, that is called when the animation completes, and then your callback function starts the next one. See http://api.jquery.com/animate/ and http://api.jquery.com/hide/ for examples.

answered Jan 26, 2012 at 18:36

Chris Nash

3,07121 silver badges22 bronze badges

Comments

clime · Accepted Answer · 2012-01-27 23:16:42Z

0

Wrap the second block in a function called, lets say, hideDivs() and add this function as callback in the last row of the first block like this:

if (divid!= '5') { $('#div5').animate({ 'opacity': 0 }, 500, hideDivs); }

EDIT: this is what i mean:

if (divid!= '1') { $('#div1').animate({ 'opacity': 0 }, 500); }
if (divid!= '2') { $('#div2').animate({ 'opacity': 0 }, 500); }
if (divid!= '3') { $('#div3').animate({ 'opacity': 0 }, 500); }
if (divid!= '4') { $('#div4').animate({ 'opacity': 0 }, 500); }
if (divid!= '5') { $('#div5').animate({ 'opacity': 0 }, 500, hideDivs); }

function hideDivs() {
   if (cargroup != '1') { $('#div1').hide(500); }
   if (cargroup != '2') { $('#div2').hide(500); }
   if (cargroup != '3') { $('#div3').hide(500); }
   if (cargroup != '4') { $('#div4').hide(500); }
   if (cargroup != '5') { $('#div5').hide(500); }
}

Also consider refactoring your code as Relic's post suggests. By using each, the first block (without your conditionals) could look like this instead:

$('#div1, #div2, #div3, #div4, #div5').each(function() {
     if ($(this).attr('id') != 'div5') $(this).animate({ 'opacity': 0 }, 500);
     else $(this).animate({ 'opacity': 0 }, 500, hideDivs);    
});

edited Jan 27, 2012 at 23:16

answered Jan 26, 2012 at 18:33

clime

8,92610 gold badges64 silver badges84 bronze badges

1 Comment

Eric Hodonsky Over a year ago

This is only going to add to his code by a lot. 'if (divid!= '5') { $('#div5').animate({ 'opacity': 0 }, 500, function(){if (cargroup != '5') { $('#div5').hide(500); } }); } Per line

Collectives™ on Stack Overflow

Running JQuery animations in sequence

4 Answers 4

5 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related