使 jQuery 删除 else 语句中的动画

Question

我正在尝试停止在 768px 以下调用的 .slideUp 动画。期望的结果一直有效，直到我将大小调整回 768px 以上，然后导致我的桌面样式菜单向上滑出视图。

这背后的原因是因为我正在使用 angular 更改页面内容并希望移动体验在单击 link 后关闭菜单。

有没有办法让我的 else 语句完全删除 .slideUp 动画？

jQuery

$(window).on("load resize", function () { 
    if ($(this).width() < 768) {
        $('.lnk').on('click', function () { 
            $('#navigation').slideUp(500);
        });
    }else{
        // Things I've tried:

        // $('.lnk').on('click', function () { 
        // return false
        // });

        // $('.lnk').on('click', function () { 
        // $('#navigation').stop();
        // });

        // $('.lnk').on('click', function () { 
        // $('#navigation').slideDown();
        // });

        // $('.lnk').on('click', function () { 
        // $('#navigation').show();
        // });
    }
});

理论上，我可能会保留它，因为不会有太多人在访问时实际调整浏览器的大小，但我很迂腐。

Answer 1

不幸的是，我找不到答案，不得不重新编写我的代码以获得有效的结果。

我不会接受这个答案，因为它没有解决我的问题，我只是想跟进我使用的解决方案。

因此，我没有办法只删除 slideToggle 选项，而是更改了函数以添加、删除或切换类，具体取决于加载和调整大小时的 windows 大小。

此解决方案还删除了由于 height:auto 属性而导致的平滑动画。如果将高度设置为静态值，即可以实现平滑过渡。 height:300px

CSS

#navigation {
    height:0;
}
.responsive_nav_open {
    height:auto
}

jQuery

<script>
    (function ($) { 
        $('.responsive_nav').on('click', function () {
            $('#navigation').toggleClass('responsive_nav_open');
        });
        $('.lnk').on('click', function () { 
            $('#navigation').toggleClass('responsive_nav_open');
        });
        $(window).on('load resize', function () { 
        if ($(this).width() <= 768) {
            $('#navigation').removeClass('responsive_nav_open');
        } else {
            $('#navigation').addClass('responsive_nav_open');
        }
    } );

    } )(jQuery);
    </script>

如果有人可以解决最初的问题，只是为了澄清它是否真的可能，我仍然有兴趣知道。

使 jQuery 删除 else 语句中的动画

Make jQuery remove animation in else statement

jquery

animation

resize