multiple effects on one element simultaneously

Question

I am trying to fadeIn and and animate simultaneously. However it is doing them one after the other. How do you do it at the same time.

I have tried:

$('#box').fadeIn(1000);
$('#box').animate({marginTop:'0'}, 1000);

AND

$('#box').fadeIn(1000).animate({marginTop:'0'}, 1000);

But they both do the same thing. One event then another. How do I do them at the same time?

score 1 · Accepted Answer · answered Aug 01 '14 at 01:34

1

You could animate opacity instead of FadeIn. So set the element to opacity 0, remove display:none, and then animate the opacity, it will happen the same time as the margin animation.

answered Aug 01 '14 at 01:34

Source

1,026
4
11
23

score 0 · Answer 2 · answered Aug 01 '14 at 01:11

0

You have to use dequeue:

When jQuery.dequeue() is called, the next function on the queue is removed from the queue, and then executed.

This will cause them both to happen simultaneously.

$('#box').fadeIn(1000).dequeue().animate({marginTop:'0'}, 1000);

answered Aug 01 '14 at 01:11

dave

62,300
5
72
93

That worked, except before the fadein I have delay(), and dequeue seems to ignore the delay – user2909486 Aug 01 '14 at 01:13

multiple effects on one element simultaneously

2 Answers2