jQuery: Calling 2 functions same time?

Question

Can I call 2 functions at the same time with jQuery?

For example:

I am trying to perform something like http://www.wunderkit.com/. If you notice, when the sofa fade's In, it animates down at the same second. When it moves at the very end bottom it comes up for around 3-4 pixels.

Currently I have:

$(".logo").fadeIn().animate({ marginTop: 20 }, 'fast', function() {                         
        $(this).animate({ marginTop: -5 }, '');
});

This fade's In the logo, waits 1-2 seconds and then the animation begins.

Is there any other way I can call this?

Thanks alot

http://stackoverflow.com/questions/1251300/how-to-run-two-jquery-animations-simultaneously — Bart, Nov 04 '11 at 17:02

Alec Wenzowski · Answer 1 · 2011-11-04T17:08:32.617

1

if a queue: false flag is included in the options of animate(), then that animation will not go in the queue and will begin running immediately.

from the docs

see if this does what you're looking for:

$(function () {
    $(".logo").fadeIn().animate({ marginTop: 20 }, { queue: false }, 'fast');
    $(".logo").fadeIn().animate({ marginTop: -5 }, { queue: false }, 'fast');
});

edited Nov 04 '11 at 17:08

answered Nov 04 '11 at 17:00

Alec Wenzowski

3,878
3
25
40

score 0 · Answer 2 · answered Nov 04 '11 at 17:08

You can pass in more than one option to .animate(), that is the whole point.

  $('#logo').animate({
    opacity: 1,
    marginTop: '20',
    height: 'toggle'
  }, 'fast', function() {
    $(this).animate({ marginTop: -5 }, '');
  });

This will do the fade and scroll at the same time.

jQuery: Calling 2 functions same time?

2 Answers2