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

Question

首先，我在http://www.romadev.com 上有一个动画菜单，我需要修复它。菜单使用 javascript/jQuery 和 CSS3 动画进行动画处理。

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

这会导致菜单项在最后几个项目仍然以动画方式退出时进行动画处理。

我尝试了多种方法，例如 .stop() 和 clearTimeout。但问题是我是设计师而不是铁杆程序员，因为我主要做 html、css 一点 php 以及一点 javascript 和 jQuery。

我搜索了很多示例，还发现 .stop() 仅适用于即 .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 用于此项目和其他项目。

真诚的，

克里斯蒂安

Answer 1

感谢 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);
});