Javascript 如何停止包含多个超时动画的超时动画

首先，我有一个动画菜单，我需要修复它。菜单是用javascript/jQuery和CSS3动画制作的

但问题是，当有人快速单击屏幕左上角的菜单按钮（即3次）以显示、隐藏然后显示菜单时，上一个动画不会停止播放

这会使菜单项在最后几个项仍在动画输出时进入动画

我尝试过多种方法，如.stop（）和clearTimeout。但问题是我是一个设计师，而不是一个硬核程序员，因为我主要做html、css、一点php、一点javascript和jQuery

我在谷歌上搜索了很多例子，也发现了。stop（）只适用于I.e..animate（），还发现大多数人使用clearTimeout，但我只是不知道如何实现它，如何让clearTimeout起作用。所以我把代码改回原来的样子

以下是我的菜单代码：

$("#menu-toggle").click(function() {

    // Menu SlideDown Animation
    $("#primary-menu-container").toggleClass("primary-menu-container-visible");

    // Menu Button Icon Animation
    $("#menu-icon-top").toggleClass("menu-icon-top-active");
    $("#menu-icon-middle-1").toggleClass("menu-icon-middle-1-active");
    $("#menu-icon-middle-2").toggleClass("menu-icon-middle-2-active");
    $("#menu-icon-bottom").toggleClass("menu-icon-bottom-active");
});

// Animate Menu Items
$("#menu-toggle").click(function() {

    setTimeout(function() {

        $("#home").toggleClass('menu-item-animation');
        setTimeout(function() {

            $("#over-ons").toggleClass('menu-item-animation');
            setTimeout(function() {

                $("#cases").toggleClass('menu-item-animation');
                setTimeout(function() { // Do something after 3 seconds

                    $("#applicaties").toggleClass('menu-item-animation');
                    setTimeout(function() { // Do something after 3 seconds

                        $("#nieuws").toggleClass('menu-item-animation');
                        setTimeout(function() { // Do something after 3 seconds

                            $("#support").toggleClass('menu-item-animation');
                            setTimeout(function() { // Do something after 3 seconds

                                $("#contact").toggleClass('menu-item-animation');
                            }, 150);

                        }, 150);

                    }, 150);

                }, 150);

            }, 150);

        }, 150);

    }, 0);
});

因此，如果有人能帮我指出正确的方向，那就太好了，因为我真的很想了解如何在这个项目和其他项目中使用clearTimeout

您诚挚的,

---

Christiaan

谢谢Kamienok的回复，但在我的一个朋友的帮助下，我终于成功地让它工作了

我使用的最终代码：

$("#menu-toggle").click(function() {
    // Menu SlideDown Animation
    $("#primary-menu-container").toggleClass("primary-menu-container-visible");

    // Menu Button Icon Animation
    $("#menu-icon-top").toggleClass("menu-icon-top-active");
    $("#menu-icon-middle-1").toggleClass("menu-icon-middle-1-active");
    $("#menu-icon-middle-2").toggleClass("menu-icon-middle-2-active");
    $("#menu-icon-bottom").toggleClass("menu-icon-bottom-active");
});

//GLOBAL VARIABLE FOR MENU ANIMATION  
var animationEvent1;
var animationEvent2;
var animationEvent3;
var animationEvent4;
var animationEvent5;
var animationEvent6;
var animationEvent7;

$("#menu-toggle").click(function() {

    //CLEAR ALL SCHEDULED TIME OUTS FOR MENU ANIMATION
    clearTimeout(animationEvent1);
    clearTimeout(animationEvent2);
    clearTimeout(animationEvent3);
    clearTimeout(animationEvent4);
    clearTimeout(animationEvent5);
    clearTimeout(animationEvent6);
    clearTimeout(animationEvent7);

    //REMOVE CLASSES FOR MENU ANIMATION
    $('#home').removeClass('menu-item-animation');
    $('#over-ons').removeClass('menu-item-animation');
    $('#cases').removeClass('menu-item-animation');
    $('#applicaties').removeClass('menu-item-animation');
    $('#nieuws').removeClass('menu-item-animation');
    $('#support').removeClass('menu-item-animation');
    $('#contact').removeClass('menu-item-animation');

    animationEvent1 = setTimeout(function() {

        $("#home").toggleClass('menu-item-animation');
        animationEvent2 = setTimeout(function() {

            $("#over-ons").toggleClass('menu-item-animation');
            animationEvent3 = setTimeout(function() {

                $("#cases").toggleClass('menu-item-animation');
                animationEvent4 = setTimeout(function() {   // Do something after 3 seconds

                    $("#applicaties").toggleClass('menu-item-animation');
                    animationEvent5 = setTimeout(function() {   // Do something after 3 seconds

                        $("#nieuws").toggleClass('menu-item-animation');
                        animationEvent6 = setTimeout(function() {   // Do something after 3 seconds

                            $("#support").toggleClass('menu-item-animation');
                            animationEvent7 = setTimeout(function() {   // Do something after 3 seconds

                                $("#contact").toggleClass('menu-item-animation');
                            }, 150);

                        }, 150);

                    }, 150);

                }, 150);

            }, 150);

        }, 150);

    }, 0);
});

---

请看这里：您可以添加JSFIDLE和工作示例吗？