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

Question

我有一个弹出侧面菜单，其中包含以下触发器:

<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)；它显示但随后立即再次消失。

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

干杯，丹尼

Answer 1

尝试根据类而不是 :visible 来改进触发器条件语句。参数。您可能会想要使用类，因为它们具有更精确的性质，而 CSS 结果可能是零星的。

所以代替 if ($("#asideMenu").is(":visible")) {

使用

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

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

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