Link to home
Create AccountLog in
Avatar of SAbboushi
SAbboushiFlag for United States of America

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

Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

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} );
Avatar of SAbboushi

ASKER

Thanks - but no difference...
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
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
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

Beautiful!!!  Thank you very much!

Pros and cons of jquery vs. css3?
css3 will only work in modern browsers (that excludes IE < 9), but it's more lightweight. depends what you're targeting..

cheers.
k thanks--