javascript - SlideOut 后下拉菜单截断

Question

我正在使用一个下拉菜单，我修改它以使用动画，例如使用 onmouseover 和 onmouseout 的 SlideOut 和 FadeIn。问题是在所有嵌套列表中悬停几次后出现，这导致第二个嵌套列表被切断。
您可以通过从“nav 1”移动到“nav 2”并快速返回来复制错误。

链接到 jsFiddle

截屏截图：http:
//dl.dropbox.com/u/53879403/screenshot.png
请感谢您的任何建议/批评。

Answer 1

请看这个小提琴：http: //jsfiddle.net/SuRJ9/

我更改的代码：

function slideDown(toSlide) {
    currentHover(toSlide);
    $($(toSlide).children('ul')[0]).slideDown('medium',
        function(){   $(this).css('overflow','visible') });
}

我在完成动画后添加了overflow重置。由 jQuery设置以制作滑动动画。visibleoverflowhidden

另外，请不要使用onmouseout="slideUp(this)"and onmouseover="slideDown(this)"，这是一种突兀的 JavaScript 并且是一种糟糕的技术。您应该使用 jQuery 分配这些事件。

Answer 2

$.fadeOut/In()在运行动画之前应用某些样式。这些在动画完成时被移除。

您fadeOutNav()正在调用 stop(true) ，如果在 fadeOut() 或 fadeIn() 工作时完成，将保留它们应用于元素的样式。在这种情况下溢出：隐藏在父 ul 上。您可以移除停止并让效果冒泡，或将 a.css('overflow','')添加到您的链中。