height toggle without losing height in jquery

I have a nested div. When user mouse over's a parent div, the child div becomes visible. on mouse out, the child div goes back to invisible.

The trouble I am having was, if I quickly mouseover-out on my parent div say 5 times, the slideToggle effect is played 5 times and I have to wait till it finishes the animation.

So, I added a .Stop() before slideDown() but now, If I mouse out BEFORE the child div reaches full height, that current height becomes it's new height. so next time I mouse 开发者_Go百科over I only see it partially (or nothing at all, depending on when I removed my mouse on parent div)

How do I solve this issue?

I quickly have mocked up a demo on JsFiddle

thanks.

You need to change your code to look like this:

$('div#div2', this).not(":animated").slideDown();

.not(":animated") will tell jQuery to only select elements (in the matching set) that are not currently being animated. this ensures that your element won't be double animated.

unlike .stop() this one won't left your animation incomplete so height problem is rectified this way.

jsFiddle: http://jsfiddle.net/YrRe4/1/

You can also define the boolean parameters for .stop() to have both true. .stop(true,true) It will end the queue and jump at the end of animation.