Avatar of SAbboushi
SAbboushi
Flag 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

jQueryJavaScript

Avatar of undefined
Last Comment
SAbboushi

8/22/2022 - Mon
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?
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
ASKER CERTIFIED SOLUTION
Kyle Hamilton

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
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

SAbboushi

ASKER
Beautiful!!!  Thank you very much!

Pros and cons of jquery vs. css3?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
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--