jQuery: Multiple animations with a delay on a set of divs -

I have a group of 4 divisions and I'm using jQuery to animate them once, then delay To use the delay (), and then to run the second set of animation on them, put the divs back into their original configuration. Here is the code I have:

  // Only selectors named 'Option 1' are affected by delays, and not 'Option 1 IMG' or 'Option 2' $ (" # Option 1"). ShowOption 1 () .delay (3000) .hideOption1 (); // If I'm not connected to # Option 1, then the delay does not work, but the animation that requires $ (document) work as well. ShowOption1 () Delay (3000) HideOption1 (); JQuery.fn.showOption1 = function () {$ ("# option2, # option3, #leftColumn") Fade (1000); $ ("# Option1") CSS ("Z index", "5"); $ ("# Option1") Animate ({left: "370px",}, 1500); $ ("# Option1 img") Animate ({width: "500px",}, 1500, function () {$ ("p.optionText"). Text ('hello');}); This return; } JQuery.fn.hideOption1 = function () {$ ("# option1 img"). Animate ({width: "175px",}, 1500); $ ("# Option1") Animate ({left: "743px",}, 1500); $ ("# Option2, # Option3, #left column") Fadein (2000); $ ("# Option1") CSS ("z index", "1"); This return; }  

I have tried two ways to run these two tasks, as seen on lines 2 and 5. In case of line 2, showOption1 () will run fine, but then only

  $ ("# option1"). Chetan ({left: "743px",}, 1500); After the delay  

will work with hideOption1 () Remaining hidden open1 () is removed immediately after the end of ShowOp (1), ignoring the delay.

On the other hand, if I run 5 lines, all code hiding continues in the desired one at Open 1 (), but the delayed execution after the execution (shown) I ignore all the code in how I can open the Open (1) delay after one Student run?

Thanks in advance!

Whatever you are trying to do is not exactly right, it adds a delay to the animation queue On the each element that selectors are specific to all the animations and delays of matches, the boundaries or selectors are not tied to running in any way. Since you have different times (1000 mms and 1500 mms), they delay and the beginning of the next animation is out of sync.

In addition, there is no reason to put these functions in the jQuery object, because instead you do not use this to do anything else instead I just do it:

  function showOption1 () {... code ...} // and hide the function open1 () {... code ...}  this ) is actually used, the other option is to hide the class for example an To run and, I act like the above, then call them like this: 
 
  showOption1 (); SetTimeout (hide 1, 4500); // 3000 + 1500 from the animation, adjust if necessary