asked on

jquery animations - how to run at the same time?

How can I have these animations all run at the same time? The $mask.fadeOut seems to run last regardless of the order of the commands (why is that?)

$MenuItems.stop(true,true).fadeOut(200); // sets display: none
$mask.fadeOut(200, function() { $mask.css('z-index', '0'); } );
$Toolbar.stop(true, true).animate({ backgroundColor: '#008000', height: ToolbarHeight }, 200 );

Open in new window

Kyle Hamilton

look up "queue false". You can use it on the animate() method, not sure about fadeOut.

$Toolbar.stop(true, true).animate({ backgroundColor: '#008000', height: ToolbarHeight }, {queue:false, duration: 200} );

SAbboushi

ASKER

Thanks - but no difference...

SAbboushi

ASKER

I am new to jquery but I thought I read somewhere that fadeout calls animation routine. Is there a way to make an animation call directly to do the fadout (.animate instead of .fadeOut) so that I can also specify queue:false for the fadeout animation - and then would they both happen at the same time?

ASKER CERTIFIED SOLUTION

Kyle Hamilton

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Kyle Hamilton

with css3:

$Toolbar.css({
                        '-webkit-transition': 'background-color 0.3s ease',
                        '-moz-transition': 'background-color 0.3s ease',
                        '-o-transition': 'background-color 0.3s ease',
                        '-ms-transition': 'background-color 0.3s ease',
                        'transition': 'background-color 0.3s ease'
                });                                        

                $Toolbar.css({ 'background-color': '#008000'}).stop(true, true).animate({'height': ToolbarHeight }, {queue:false, duration: 2000} );

Open in new window

Kyle Hamilton

https://github.com/jquery/jquery-color

SAbboushi

ASKER

Beautiful!!! Thank you very much!

Pros and cons of jquery vs. css3?

Kyle Hamilton

css3 will only work in modern browsers (that excludes IE < 9), but it's more lightweight. depends what you're targeting..

cheers.

SAbboushi

ASKER

k thanks--