Issue with drop-down menu

[Kuzyo]

Hi everyone.

Here I made menu using jQuery slideDown function http://codepen.io/Kuzyo/pen/xKiIr, under Realisation button there is sub-menu, everything seems works fine, but sometimes when you fast move on a button Reaslisation sub-menu appears before slideDown effect. Web tool shows it’s because “display: block” applies faster than height becomes bigger. Can I somehw solve this problem.

Thanks for advice.

[g3logic]

Toggling your animation using hover is probably not your best bet. Also, using slideUp and slideDown is needlessly setting the submenu to display none, which is also causing a stuttering problem if you have your mouse just below the menu item.

You’re better off using animate to move the panel up and down and trigger it using mouseenter and mouseleave. I would also use divs instead of unordered lists (just my preference).

Also, you are going to want to add stop() to your tab that slides left to right to interrupt the animation when you move your mouse quickly from one menu item to another.

If you aren’t already familiar with gsap, I would STRONGLY recommend you check it out. Makes creating this kind of animation SUPER easy! http://www.greensock.com/gsap-js

[Kuzyo]

problem was solved by adding submenu.stop(true, true) instead submenu.stop(true, false)

[Author]

Posts