Jquery/animate.css 侧边菜单在多次切换时消失

Jquery/animate.css side menu disapearing when toggled more than once

本文关键字：消失 菜单 animate css Jquery      更新时间：2023-09-26

我有一个弹出的侧边菜单，它有以下触发器：

<a href="#" id="cmdAsideMenu" class="dropdown-toggle dropdown-form-toggle" title="Open slidebar">
<i class="fa fa-outdent"></i>
</a>
<section id="asideMenu" class="aside-menu right">
 <div class="sidebar-content"></div>
</section>

这将使用以下 jQuery 添加或删除相应的 CSS 类以执行动画输入/输出效果。

$(document).on("click", "#cmdAsideMenu, #btnHideAsideMenu, .navbar-toggle-aside-menu", function () {
        if ($("#asideMenu").is(":visible")) {
            $("#asideMenu").removeClass('animated bounceInRight');
            $("#asideMenu").addClass('animated bounceOutRight');
            $('#asideMenu').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
                $(this).hide();
                $("#asideMenu").removeClass('animated bounceOutRight');
            });
        }
        else {
            $("#asideMenu").show().addClass('animated bounceInRight');
        }
        return false;
    });

这在第一次工作正常。但是，如果在显示和隐藏菜单后再次单击触发链接（#cmdAsideMenu）;它显示，但紧接着又消失了。

如何修改此代码，以便菜单可以反复打开和关闭？

干杯丹尼

尝试优化触发器条件语句，使其基于类而不是:visible参数表。 您可能希望使用类，因为它们具有更精确的性质，其中 CSS 结果可能是零星的。

所以而不是if ($("#asideMenu").is(":visible")) {

用

if ($('.animated').length < 1) { .

然后，对于 else 条件，您将使用 if ($('.animated').length > 0) { .

最后，我假设您使用的是 .one() 方法，因为您的动画中可能存在计时影响。 这很好，但是如果您继续遇到问题，您可能需要分别考虑原版JavaScript方法setInterval()和setTimeout()。 同样，这是因为后面提到的方法提供了更绝对的控制，您可以clearInterval()硬停止该功能。

相关文章：