Home/ Questions/Q 6143057
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T18:28:20+00:00

I have a nested div. When user mouse over’s a parent div, the child

  • 0

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 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0