0

我再次写在这里，因为我的页面中的脚本有一些问题。我有一个菜单焦点问题，我在一两个星期前在这个论坛上写了它，但是这个很棒的脚本表明我一个用户有一个错误，我不知道如何解决它。我已经尝试了很多合理的解决方案，但问题仍然存在。

这是 Fiddle 的代码，它模拟了我的问题：http: //jsfiddle.net/PRZYN/15/

$(document).ready(function() {
    $('#handle').mouseenter(slideIn);
    $("#box").mouseleave(function() {
        $(this).animate({
            left: "-=180px"
        }, "fast");
        $('#handle').mouseenter(slideIn);
    });
    $("[name='skin']").mouseleave(function(e) {
        e.stopPropagation();
    });

});

function slideIn() {
    if ($("#box")) $("#box").animate({
        left: "+=180px"
    }, "slow");
    $(this).unbind("mouseenter");
}

如您所见，有一个div（蓝绿色的一个显示左侧菜单弹出窗口），当div获得焦点时显示，当div失去焦点时隐藏。

该脚本中的问题是，这两个 div 何时处于动画状态，如果用户在前端动画和后端动画中快速移动鼠标，则脚本会混淆，菜单开始显示和隐藏，这很烦人。当菜单出现相同的错误时，还有其他一些方法，但我没有很好地定位它。我认为，当用户将这个 div 悬停并且鼠标停在某个地方时，这个问题也会显示出来——这有时会有所不同。

我以某种方式找到了问题，但我不知道如何解决它。我需要在菜单处于动画状态时禁用此 div 上的所有其他事件（但不是 .animation()），当鼠标不在 div 上时禁用元素上的所有其他事件，然后在动画完成并且用户想要再次打开或隐藏菜单时再次启用它。

我希望你能理解我的问题，如果有人能帮助我解决问题，我会很高兴。

问候，米哈

4

1 回答 1

1

您可以使用.stop()取消动画队列并阻止动画在用户停止与元素交互后运行。此外，最好使用 的固定值left，因为使用+=and-=会导致框在快速移入和移出容器后不正确对齐。即使用"-180px"and"0px"而不是"-=180px"and之类的值"+=180px"。

JSFiddle：http: //jsfiddle.net/PRZYN/16/

于 2012-11-29T09:23:52.980 回答