1

I have these two things happen in my jQuery-animated website:

$('#myFirstDiv').animate({top: "15%"}, 3000); 
$('#mySecondDiv').animate({bottom: "15%"}, 3000);

These two animations seem to happen one after another, rather than simultaneously. There's a slight delay before the second one plays, about one tenth of a second. I want to make them occur simultaneously.

I tried this:

$('#myFirstDiv').animate({top: "15%"}, 3000); 
$('#mySecondDiv').animate({bottom: "15%"}, {duration:3000, queue: false});

but it's probably wrong.

I would appreciate advice on how to do this correctly.

Dimitri Vorontzov
  • 7,834
  • 12
  • 48
  • 76
  • Can you throw your code into jsFiddle.net so we can test it? – Abe Miessler Jun 15 '11 at 18:22
  • 1
    When you say "it's probably wrong", do you mean "it doesn't work"? – lonesomeday Jun 15 '11 at 18:23
  • 1
    Working as intended here http://jsfiddle.net/niklasvh/gYTYN/ ? – Niklas Jun 15 '11 at 18:23
  • Thank you Niklas. Interesting. It does work as intended. maybe I'm misunderstanding something. When the two statements follow one another like this, aren't they supposed to play one after another? I'm asking because there does seem to be slight delay on my site between the first and second animations. – Dimitri Vorontzov Jun 15 '11 at 18:25
  • @Abe I was about to, but Niklas beat me to it. – Dimitri Vorontzov Jun 15 '11 at 18:26
  • @lonesomeday I mean it doesn't *appear* to work. There seems to be a very slight deleay between the two animations, whether I use it or not. – Dimitri Vorontzov Jun 15 '11 at 18:27
  • I think I do. It's a subjective thing. There appears to be a microsecond delay, which in my case makes the site look a little too rough. – Dimitri Vorontzov Jun 15 '11 at 18:30
  • Do you see the same slight delay in jsFiddle? – Abe Miessler Jun 15 '11 at 18:31
  • No, but the initial position in the fiddle is different. My secondDiv also slides up, not down. I'm placing the URL to the site in the edited question, may I please ask you to take a look. – Dimitri Vorontzov Jun 15 '11 at 18:34
  • Put a function in a callcack and they will play one after another. Put them right next to each other and they will play simultaneously. – Lime Jun 15 '11 at 18:37
  • @Lime, so you're saying that the way they are written now, they are supposed to play simultaneously? – Dimitri Vorontzov Jun 15 '11 at 18:39
  • Here is a similar post: http://stackoverflow.com/questions/2344804/how-can-i-execute-multiple-simultaneous-jquery-effects – Calvin Froedge Jun 15 '11 at 18:43
  • Thank you Calvin. Yes, there is a certain similarity, but I think it's only superficial. I am animating two separate divs with identical effect, not one element with two different effects. One way or another, I don't think this challenge should require a page of code as a solution. There has to be a simpler answer. – Dimitri Vorontzov Jun 15 '11 at 18:46
  • For the sake of curiosity and to eliminate any perceptual subjectiveness from the test.. I made a jsfiddle with the elems animated side-by-side: http://jsfiddle.net/5a3k/e6Fmb/ I dont see any delay.. – zack Jun 15 '11 at 19:12
  • Could you try it like this: animate the 1st one up from top:300% to top:15%; animate the 2nd one up from bottom:-200% to bottom:15% ? – Dimitri Vorontzov Jun 15 '11 at 19:21
  • Here's my version: http://jsfiddle.net/e6Fmb/6/ See the delay? – Dimitri Vorontzov Jun 15 '11 at 19:32
  • There is no delay, one animation is just taking longer then the other. You have one set to bottom and the other set to top. – Lime Jun 15 '11 at 23:31
  • Yes, you're right Lime. I made a math mistake. It's supposed to be top: 300% and bottom:-270%. Then the animations play synchronously. I am glad I asked the question though, because it helped me to find the mistake. – Dimitri Vorontzov Jun 16 '11 at 04:25

1 Answers1

2

Your code should work just fine. Animation in jQuery is asynchronous, this means that if you have two animation calls, the second one will get called right after the first one even though the first animation is still in progress. If at any point you want to have the first one to execute to the end before the second one, your code will look like 

$('#myFirstDiv').animate({top: "15%"}, 3000, function(){
  $('#mySecondDiv').animate({bottom: "15%"}, 3000);
});
sjobe
  • 2,817
  • 3
  • 24
  • 32
  • Everything looks fine here, although it is smoother in chrome than in firefox. [I forgot to click "Add Comment" lol, I've had this open for 2 hours] – sjobe Jun 15 '11 at 20:32