How to apply two different animations to the same element with different duration?

Question

I've already found a solution using {queue: true}, but the problem is that this doesn't seem to work in my case.

I've created a fiddle to help you understand my problem: http://jsfiddle.net/c6SS9/1/.

jQuery Code:

$(function() { for(var i=0; i < $('.block').size(); i++) { $('.block').eq(i).delay(i*200).animate({'left': '300px'}, 700); $('.block').eq(i).delay(i*200).animate({'opacity': '1'}, {queue: false, duration: 1000}); } });

What i want is that the animation used for the opacity starts when the block start to move and this has to happen for each block.

can you not just increase the duration of the opacity animation? — Justin McDonald
– Justin McDonald, Commented Dec 11, 2012 at 1:35
But this is not really what I want. What I want is that the opacity animation start when each block starts to move. — Dim13i
– Dim13i, Commented Dec 11, 2012 at 1:38

TwiN · Accepted Answer · 2012-12-11 01:37:27Z

3

I guess you understand the problem is that the opacity animation bypasses delay as it is not on the queue.

In this case, use the generic .queue() function to add the animations AFTER the delay, so that they are executed after the delay even if they are not on the queue

Updated fiddle

answered Dec 11, 2012 at 1:37

TwiN

1,9671 gold badge17 silver badges27 bronze badges

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

5 Comments

Dim13i Over a year ago

Can you please tell which is in your opinion the best way to execute a function after the animation of the last block is completed?

TwiN Over a year ago

If you ask me, I would use complete for the opacity animation

Dim13i Over a year ago

Yes but with {queue: false} in the opacity animation I can't use a callback function. I've tryed and it's not working.

TwiN Over a year ago

You can still use complete in the options object you pass to .animate(): jsfiddle.net/c6SS9/9. The problem is you want to execute that for only the last block. You can add a class or id to the last block, or use .index() to check if it is the last block, if it is then execute the rest of the function.

Dim13i Over a year ago

Oh, I see. I thought complete and callback function were the same thing, but they're not. Thank you again!!

Collectives™ on Stack Overflow

How to apply two different animations to the same element with different duration?

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related