delaying removeClass / addClass on mouseover
Hello. I have the following page and when you mouseover products in the main nav you get a flyout:
http://gravityswitch.com/atalasoft/template-home.htmlThe flyout appears using jQuery onmouseover - one class is removed and one is added that simply displays the flyout.
The client is asking for the flyout to be delayed by a second so that if someone quickly goes over it nothing happens. I worked on this yesterday and while I got it to delay using setTimeout the behavior wasn't what I expected (the delay would cause the mouseout to not happen at times). I also tried .delay() which didn't work for me.
What I'm looking to accomplish is that if someone stays on the products for 1 second the flyout appears. If they mouseover and go away within a second nothing happens.
Admittedly I'm no jQuery expert but any advice you can offer would be much appreciated!