1

I would like to have jquery execute certain statements only AFTER it has completed applying my css change. However, despite trying to search for the answer... I have been unable to so far. Any pointers, would be appreciated.

$('#elements').css( 'visibility', 'hidden'); 
$('#another_element').slideDown(); // should only be executed after the above is completely done
Grateful
  • 9,685
  • 10
  • 45
  • 77
  • It would be happened like that.. – Rajaprabhu Aravindasamy Jan 20 '15 at 08:43
  • That's what I expected. However, both statements appear to begin executing at the same time. I would like to ensure that the second statement does not execute at all, until the first is completed... even if it takes some time. – Grateful Jan 20 '15 at 08:45
  • $('#elements').css( 'visibility', 'hidden'); would be instant un-less you have some css transition/animation – atmd Jan 20 '15 at 08:46
  • Again, that's what I thought. However, due to other reasons if the first statement is not instantaneous.. the second is still executed. I don't want it to begin until the first is complete ! – Grateful Jan 20 '15 at 08:50
  • @Grateful It would be great if you provide a demo on what you are talking about rather making an unproductive discussion. – Rajaprabhu Aravindasamy Jan 20 '15 at 08:51
  • 1
    @Grateful Other solution is to add a timer which checks for the css and then execute the subsequent command. Here is the answer http://stackoverflow.com/a/24484924/2000051 – K K Jan 20 '15 at 08:53
  • 1
    Can you add the code to a fiddle? jquery's .css has no call back and should be doing what you want. – atmd Jan 20 '15 at 08:57
  • Not tested, but you could try jquery's hide() instead of the css call, with a duration of 0 and do the slidedown in the complete callback – Me.Name Jan 20 '15 at 08:58
  • @Me.Name I wasn't looking for a way to "display: none" the element. I was specifically asking for a way to "visibility: hidden". – Grateful Jan 21 '15 at 05:18
  • Oh right, sorry, not the same thing of course. Don't know if it's acceptable to use transparancy (opacity 0) instead of hidden, otherwise you could try fadeOut to 0 with duration 0 with a callback. `$('#elements').fadeTo(0,0, function(){ //slidedown });` The only other option I know of is webit transition listereners, but don't know if you can tweak those to the specific event. – Me.Name Jan 21 '15 at 08:24

1 Answers1

0

Okay. So the answer is that since there is no callback for the css function, it's not possible.

Grateful
  • 9,685
  • 10
  • 45
  • 77