3 Replies - 273 Views - Last Post: 07 January 2017 - 05:41 AM

#1 walter25  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 07-January 17

waiting to activate a div

Posted 07 January 2017 - 05:13 AM

Hello,

I have a div01 that is animate (width : 0px to 500px, height is not changing) when I click on button 01.
I have an other div, div02 that is also animated (width : 0px to 500px, height is not changing) when, I click on button 02.

My problem, that I don't know how I can do to wait that my div01 finish to reach 500px when I click on button 02 to start to activate my div02.

Thanks in adavnce
Is This A Good Question/Topic? 0
  • +

Replies To: waiting to activate a div

#2 andrewsw  Icon User is online

  • lashings of ginger beer
  • member icon

Reputation: 6341
  • View blog
  • Posts: 25,584
  • Joined: 12-December 12

Re: waiting to activate a div

Posted 07 January 2017 - 05:21 AM

A quick search of your question finds useful results, such as:

How to wait for one jquery animation to finish before the next one begins?

I searched "jquery wait for other animation to finish".

But I am not certain of your precise requirement. It sounds like you want to check, and wait for, the first animation to complete when you click the second button?
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • lashings of ginger beer
  • member icon

Reputation: 6341
  • View blog
  • Posts: 25,584
  • Joined: 12-December 12

Re: waiting to activate a div

Posted 07 January 2017 - 05:30 AM

Checking whether an element is currently animated may also be relevant:

if( $(elem).is(':animated') ) {...}


http://stackoverflow...-being-animated
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • lashings of ginger beer
  • member icon

Reputation: 6341
  • View blog
  • Posts: 25,584
  • Joined: 12-December 12

Re: waiting to activate a div

Posted 07 January 2017 - 05:41 AM

Mm, interesting. What I might consider is:

  • Attaching a promise to the first animation .promise().done( .. )
  • Inside done, check if a boolean value (a flag) is set to initiate the second animation
  • In the click event of the second button, check if the first element is currently animated (code above)
  • If not, just start the second animation,
  • It it is, then set the flag to true.

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1