如何在

Question

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

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

这会导致菜单项动画显示，而最后几个项目仍在动画中。

我尝试了多种内容，例如.stop（）和clearTimeout。但问题是我是一名设计师，而不是一名核心程序员，因为我主要做html，css有点像php和一些javascript和jQuery。

我已经搜索了大量的例子，并且发现.stop（）仅适用于ie .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);
});