Forums

ChrisP

Hi all,

I'm working on a mobile navigation menu currently. I'm no javascript/jquery pro by any means, and have pieced together a menu that is working almost exactly how I want it to.

I have a fiddle of the menu here.

I added to the script to remove/add the .active class so I could add a box shadow while the menu is out.

I can't seem to find out how to delay the removeClass until the menu is fully collapsed. Currently, the class is removed and the box shadow is gone before it begins to retract, and I'd like to add a delay to prevent that.

I've looked around at tutorials online, and after a few failed attempts with .delay, I understand I should use the .setTimeout for this, rather than .delay, but I have minimal working knowledge as to how that should be written. Could anybody shed some light on this?

Also, is there a simpler way to write the jQuery I already have?

Any help is greatly appreciated.

JohnMotylJr

I can't seem to find out how to delay the removeClass until the menu is fully collapsed. Currently, the class is removed and the box shadow is gone before it begins to retract, and I'd like to add a delay to prevent that.

Im sorry, call me ignorant but after i read this i didnt read any more.. Sounds to me like all you need is a callback function.

$('#slider span').toggle(
   function() {
      $('#headerNav').animate({
         left: 0
      }, 'slow').addClass('active');
   }, function() {
      $('#headerNav').animate({
         left: '-90%'
      }, 'slow', function() {
         $(this).removeClass('active');
      });
   }
);

Is this what you want?

http://jsfiddle.net/john_motyl/E62RK/

ChrisP

That's exactly what I wanted.

Thank you so much!

JohnMotylJr

@ChrisP : I know you said you werent much of a js/jquery kinda guy and thats ok. Check this article out, it talks about using callback functions and what they can do for you.

Reference: http://docs.jquery.com/Tutorials:How_jQuery_Works#Callback_and_Functions

treehouse : what would you like to learn today?

Forums

[Solved] .setTimout and .delay