jquery滑动菜单打开/关闭动画问题

Question

我正在本地测试：http://jsfiddle.net/fYkMk/1/ 这是一个预订表格，可以通过鼠标悬停（预订面具）打开，并在鼠标离开时关闭。 它有4个字段：

• 日期选择器
• 来宾人数
• 号码室
• 夜数

最后三个字段是滑动菜单，只需单击相对图标即可打开。

这些滑动动画一直有效，直到用户决定在oprning /关闭动画完成之前再次“鼠标悬停”然后“mouseleave”和“mouseover”覆盖预订掩码div。

因此，列表被破坏了，我只能看到它们中的一部分。[见下图]

希望你能帮我解决这个问题。 感谢

卢卡

Answer 1

我无法在你的例子中看到这三个按钮，但是尝试在代码中实现.stop(true, true)，如果动画发生碰撞，请尝试设置另一个动画qeue，我相信默认的jQuery是“fx” 。还有.qeue（）和.deqeue（）函数可以帮助你，转到jQuery站点并阅读文档，或者等一下，看看是否有人更聪明，然后我才能找到它。

如果我理解正确的话，下拉菜单会消失在主站点/背景后面的一点，这对我来说实际上看起来更像是一个css问题，可能与溢出隐藏有关。

.choose-list li{overflow: visible; z-index: 9999;}

.choose-list li:hover{
    background:#8B753B;
    color:white;
    overflow: visible;
}

这可以解决吗？

编辑：使用我的笔记本电脑和带有FF的窗口我看到你在说什么; - ）

在我看来问题是.booking-mask过去隐藏溢出，可能是jQuery Toggle或你在css中做的其他事情，但是在小提琴中为我添加了重要的修复，如下所示：

.booking-mask{
    background: red;
    height: 58px;
    margin: 44px 0 0;
    position: fixed;
    right:0;
    top: 0;
    z-index: 3;
    overflow:visible!important;
    /*padding:0;*/
    color:white;
}

Answer 2

jQuery animate设置hiden的可见性，所以你应该在看起来像问题的地方重置它。例如：

 $('.booking-mask').mouseenter(function(){
                mouseOverBooking = true;
                $(this).css('overflow', 'visible');
                openBookingMask();
                });

刚刚放

$(this).css('overflow', 'visible');

在合适的地方工作更顺利。

updated fiddle