How to run two jQuery animations simultaneously

Question

Is it possible to run two animations on two different elements simultaneously  I need the opposite of this question Jquery queueing animations   I need to do something like this         first   animate   width  200    200       second   animate   width  600    200     but to run those two at the same time  The only thing I could think of would be using setTimeout once for each animation  but I don t think it is the best solution

User · Answer

Posting my answer to help someone  the top rated answer didn t solve my qualm   When I implemented the following  from the top answer   my vertical scroll animation just jittered back and forth     function           first   animate      width   200px       duration  200  queue  false          second   animate      width   600px       duration  200  queue  false           I referred to  W3 Schools Set Interval and it solved my issue  namely the  Syntax  section      setInterval function  milliseconds  param1  param2         Having my parameters of the form   duration  200  queue  false   forced a duration of zero and it only looked at the parameters for guidance   The long and short  here s my code  if you want to understand why it works  read the link or analyse the interval expected parameters    var  scrollDiv     mytestdiv   var  scrollSpeed   1000  var  interval   800   function configureRepeats        window setInterval function             autoScroll  scrollDiv   scrollSpeed          interval    queue  false          Where  autoScroll  is          scrollDiv  animate           scrollTop     scrollDiv  get 0  scrollHeight          duration   scrollSpeed            Scroll to top immediately         scrollDiv  animate           scrollTop  0        0     Happy coding

User · Answer

That would run simultaneously yes  what if you wanted to run two animations on the same element simultaneously      function              first   animate   width   200px     200           first   animate   marginTop   50px     200         This ends up queuing the animations  to get to run them simultaneously you would use only one line     function              first   animate   width   200px   marginTop  50px     200         Is there any other way to run two different animation on the same element simultaneously

User · Answer

I believe I found the solution in the jQuery documentation      Animates all paragraph to a left style   of 50 and opacity of 1  opaque    visible   completing the animation   within 500 milliseconds  It also will   do it outside the queue  meaning it   will automatically start without   waiting for its turn       p    animate     left   50px   opacity  1      duration  500  queue  false         simply add  queue  false

User · Answer

If you run the above as they are  they will appear to run simultaenously   Here s some test code    lt script src  http   ajax googleapis com ajax libs jquery 1 3 2 jquery min js  gt  lt  script gt   lt script gt    function              first   animate   width  200    200           second   animate   width  600    200        lt  script gt   lt div id  first  style  border 1px solid black  height 50px  width 50px  gt  lt  div gt   lt div id  second  style  border 1px solid black  height 50px  width 50px  gt  lt  div gt

User · Answer

See this brilliant blog post about animating values in objects   you can then use the values to animate whatever you like  100  simultaneously   http   www josscrowcroft com 2011 code jquery-animate-increment-decrement-numeric-text-elements-value   I ve used it like this to slide in out           slide   function id  prop  from  to                if  from  lt  to                       Sliding out                 var fromvals     add  from  subtract  0                    var tovals     add  to  subtract  0                  else                      Sliding back in                 var fromvals     add  from  subtract  to                    var tovals     add  from  subtract  from                                 fromvals  animate tovals                    duration  200                  easing   swing      can be anything                 step  function         called on every step                        Slide using the entire -ms-grid-columns setting                       id  css prop   this add - this subtract     px 1 5fr 0 3fr 8fr 3fr 5fr 0 5fr

User · Answer

yes there is      function              first   animate          width   200px           duration  200  queue  false              second   animate          width   600px           duration  200  queue  false

User · Answer

While it s true that consecutive calls to animate will give the appearance they are running at the same time  the underlying truth is they re distinct animations running very close to parallel   To insure the animations are indeed running at the same time use     function             first   animate       queue   my-animation             second   animate       queue   my-animation    dequeue  my-animation          Further animations can be added to the  my-animation  queue and all can be initiated provided the last animation dequeue s them   Cheers  Anthony

[javascript] How to run two jQuery animations simultaneously?

Examples related to javascript

Examples related to jquery

Examples related to animation