javascript - 如何知道 jQuery 是否正在后台运行动画以及如何停止它们？

Question

我有一个带有菜单的单页网站。菜单上有四个可用部分，尽管代码逻辑相同，但以下行为仅发生在其中两个部分中。我将以“EMPRESA”部分为例。

当我单击菜单选项 EMPRESA 时，会触发以下代码:

$('#menu-empresa').click(function() {
    if(canGoToSection) {
        canGoToSection = false;
        canReturnFromEmpresa = false;
        currentSection = 'empresa';
        currentEmpresa = '#empresa-nav-1';
        $('.empresa-circle').css('background-color', 'black');
        $('#empresa-nav-1').css('background-color', 'white');
        $('#empresa-text').css('background-color', '#FFD200');
        $('#empresa-text h1').css('color', 'black');
        $('#menu').fadeOut(500, function() {
            $('#empresa').fadeIn(100, function(){
                $('#empresa-text').animate({width:597, left: -296},500, function(){
                    $('#empresa-image').animate({height:576, top:0},500, function(){
                        $('#empresa-title-empresa').fadeIn(333, function(){
                            $('#empresa-text-empresa').fadeIn(333, function(){
                                $('#empresa-nav-1').fadeIn(333);
                                $('#empresa-nav-2').fadeIn(333);
                                $('#empresa-nav-3').fadeIn(333);
                                $('#empresa-nav-4').fadeIn(333);
                                canReturnFromEmpresa = true;
                                canChangeEmpresa = true;
                                empresaActiveText = '#empresa-text-empresa';
                                empresaActiveTitle = '#empresa-title-empresa';
                            });
                        });
                    });
                });
            });
        });
    }
});

菜单淡出，该部分以动画方式逐个元素地显示。现在，当我单击 Logo 时，我使用以下代码反转动画:

currentSection = 'menu';
        canChangeEmpresa = false;
        $('.empresa-circle').fadeOut(333, function(){
            $(empresaActiveText).fadeOut(333, function(){
                $(empresaActiveTitle).fadeOut(333, function(){
                    $('#empresa-image').animate({height:0, top:-576},500, function(){
                        $('#empresa-text').animate({width:0, left: -893},500, function(){
                            $('#empresa').fadeOut(100, function(){
                                $('#menu').fadeIn(500, function(){
                                    canGoToSection = true;
                                });
                            });
                        });
                    });
                });
            });
        });

现在我回到了菜单。发生的情况是，如果我尝试在接下来的几秒钟内转到任何其他部分，菜单将立即淡出并淡入，如果该部分是我举例的部分，则它并不总是淡入。

我假设有东西在后台运行，但我不知道是什么，因为我正在为其他两个部分做同样的事情，而且效果很好。有什么想法吗？

Answer 1

var isAnimating = $("#yourid").is(':animated');

或者:

$(#yourid)
.css('overflow' ,'hidden')
.animate({/*options*/}, function(){
    // Callback function
    $(this).css('overflow', 'auto');
};