Question

我有以下脚本来打开侧边菜单。菜单逐行打开。但是，如果您快速单击菜单按钮，则会出现动画构建。我怎么能阻止这种情况发生？在.animate之前尝试使用.stop（true）和.finish（），但没有达到预期的效果。我是jQuery的新手，所以我可能做错了。

        var s = 0;
        var navMenu = document.getElementById("nav_menu");
        var navBtn = document.getElementById("btn");
        var speed = 100;

            function menuOpen() {
                if (s==0){

                    $("#nav_menu").scrollTop(0);
                    navBtn.classList.add('close');
                    navMenu.style.zIndex = "4";
                    navMenu.style.overflowY = 'auto';

                    $('ul').each(function() {
                        $(this).children().each(function(i) {
                            $(this).delay(i * speed).animate({
                                left: 0
                            });
                        });
                    });

                    s++;

                    $("li").promise().done(function() {
                        navMenu.style.zIndex = "4";
                        navMenu.style.overflowY = 'auto';
                    });

                } else {

                    navBtn.classList.remove('close');


                    $('ul').each(function() {
                        $(this).children().each(function(i) {
                            $(this).delay(i * speed).animate({
                                left: "100%"
                            });

                        });
                    });

                    s=0;

                    $("li").promise().done(function() {
                        navMenu.style.zIndex = "0";
                        navMenu.style.overflowY = 'hidden';
                    });


                };

            };

请尽可能解释您的答案。感谢

Answer 1

是的，必须使用stop() jQuery方法停止动画，请检查您的代码。您必须先拨打stop()，然后拨打animate()

$(this).stop().animate({left: 0},i * speed);

$(this).stop().animate({left: "100%"},i * speed);

如何在jQuery中停止动画构建？

1 个答案: