.setTimout and .delay

[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](http://jsfiddle.net/thatschris/LBhBK/1/ “Mobile Nav Fiddle”).

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/

[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

[Author]

Posts