Question

我有一个问题，只有当我快速点击按钮时我才会感到高兴，我认为它必须对动画做些什么，但我不确定。

这是滑出的侧边菜单的DOM。

在页面上有一个汉堡包菜单按钮。此按钮负责启动幻灯片菜单。

<a class="btn-hamburger btn-ripple btn-menu" href="#">
    <i class="material-icons">menu</i>
</a>

在DOM树的某个地方，还有滑出的菜单，在该菜单中，我们可以看到我们的按钮几乎与起始按钮相同。

<div class="side-menu-overlay hidden">
    <div class="side-menu">
        <div class="side-menu-header">
            <a class="btn-hamburger btn-ripple btn-menu" href="#">
                <i class="material-icons">menu</i>
            </a>
        </div>
    </div>
</div>

这是我做动画的jQuery。正如您从上面的DOM中看到的那样，此事件将在开始时的菜单按钮和滑出菜单中的菜单按钮上触发。按钮滑出或侧面是否取决于应用于承载滑出菜单的叠加层的“隐藏”类。

$(document).on('click', '.btn-menu', function (e) {
    if (sideMenuOverlay.hasClass('hidden')) {
        sideMenuOverlay.removeClass('hidden');
        sideMenuOverlay.animate({
            opacity: 1
        }, 200, function () {
            sideMenu.animate({
                 marginLeft: 0
            }, 250);
        });
    }
    else {
        sideMenu.animate({
            marginLeft: -240
        }, 200, function () {
            sideMenuOverlay.animate({
                opacity: 0
            }, 300, function () {
                sideMenuOverlay.addClass('hidden');
            });
        });
    }
});

发生的问题是汉堡菜单不再触发点击事件。如果我慢慢点击菜单并暂停，它会一直有效。一旦我开始快速点击（快速滑出并快速滑动），汉堡包菜单就不会再触发该事件。有趣的是，它始终是开始时的菜单按钮，这意味着当叠加层可见且菜单已用完时不是。

Answer 1

我之前遇到过这个问题，而我找到的解决办法就是在.animate（）前面使用.stop（）。

请参阅此页：http://api.jquery.com/stop/

这将阻止动画队列堆叠事件并加速组合。

jQuery动画后按钮丢失点击事件

1 个答案: