CODEWITHSUNDEEP
javascriptjquery
David Matos
David Matos

Reputation: 560

How to know if jQuery is running animations in the background and how to stop them?

I have one-page website with a menu. There are four sections available on the menu, and the following behaviour only happens in two of them, despite the code logic being the same. I'll exemplify with the section 'EMPRESA'.

When I click the menu option EMPRESA, the following code is triggered:

$('#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';
                            });
                        });
                    });
                });
            });
        });
    }
});

The menu is faded out and the section is animated to appear element by element. Now, when I click on the logo, I reverse the animations, with the following code:

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

Now I'm back at the menu. What happens is that if I try to go to any other section in the next few seconds, the menu will fade out and fade in right away, and if that section is the one I exemplify, it doesn't always fades in.

I presume something is running in the background, but I can't figure out what, since I'm doing the same thing for two other sections and it works fine. Any ideas?

Upvotes: 1

Views: 43

Answers (1)

Oscar LT
Oscar LT

Reputation: 797

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

Or:

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

Upvotes: 1

Related Questions