jQuery how can I pause the function?

Question

Ok, I'm new to jQuery and not an expert. Here is the first part of my code:

$(document).ready(function() {
    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 2000);
        return false;
    });
}); 

...and the second one:

$(document).ready(function () {
    $(window).scroll(function () {
        var $win = $(window).scrollTop();
        if ($win < $("#portfolio").offset().top - 50 || $win >= $("#referencje").offset().top - 50) {
            window.menuup = '#404040';
            window.menuover = '#FFFFFF';
            window.socialup = '#00577F';
            window.socialover = '#80D7FF';
            $(".colleft, .boxemptyDesk, .boxcontainerleft").stop().animate({backgroundColor: "#000000"}, 1000);
            $(".colright, .boxcontainerright").stop().animate({backgroundColor: "#1A1A1A"}, 1000);
            $(".menu p").stop().animate({"color": "#202020"}, 1000);  
            $(".menu p a").stop().animate({"color": "#404040"}, 1000);  
            $(".social p, .social p a").stop().animate({"color": "#00577F"}, 1000);  
            $(".flydark").stop().animate({"opacity": "1"}, 1000);  
            $(".boxbiggray, .boxgray, .pboxbiggray").stop().animate({backgroundColor: "#262626"}, 1000);
            $(".subtitle").stop().animate({"color": "#FFFFFF"}, 1000);  
        }
        else if ($win >= $("#portfolio").offset().top - 50 && $win < $("#referencje").offset().top - 50) {
            window.menuup = '#BFBFBF';
            window.menuover = '#000000';
            window.socialup = '#80D7FF';
            window.socialover = '#00577F';
            $(".colleft, .boxemptyDesk, .boxcontainerleft").stop().animate({backgroundColor: "#FFFFFF"}, 1000);
            $(".colright, .boxcontainerright").stop().animate({backgroundColor: "#F2F2F2"}, 1000);
            $(".menu p").stop().animate({"color": "#DEDEDE"}, 1000);  
            $(".menu p a").stop().animate({"color": "#BFBFBF"}, 1000);  
            $(".social p, .social p a").stop().animate({"color": "#80D7FF"}, 1000);  
            $(".flydark").stop().animate({"opacity": "0"}, 1000);  
            $(".boxbiggray, .boxgray, .pboxbiggray").stop().animate({backgroundColor: "#D9D9D9"}, 1000);
            $(".subtitle").stop().animate({"color": "#000000"}, 1000);  
        }
    });
});

The problem is, that I have to pause the second part of this code, while the first part is executing. And I don't have any idea, how to do it... Oh, I have to pause this code, because both in the same time works very slowly and the animation isn't smooth. Someone could help?

Answer 1

What you might try is to use the 'complete' callback: http://api.jquery.com/animate/

complete Type: Function() A function to call once the animation is complete.

So instead of having 2 instances of $(document).ready(...) you'd have only one, and your first bit of code would look like this:

$(document).ready(function() {
$(".scroll").click(function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 2000, function(){
        $(window).scroll(function () {
    var $win = $(window).scrollTop();
    if ($win < $("#portfolio").offset().top - 50 || $win >= $("#referencje").offset().top - 50) {
        window.menuup = '#404040';
        window.menuover = '#FFFFFF';
        window.socialup = '#00577F';
        window.socialover = '#80D7FF';
        $(".colleft, .boxemptyDesk, .boxcontainerleft").stop().animate({backgroundColor: "#000000"}, 1000);
        $(".colright, .boxcontainerright").stop().animate({backgroundColor: "#1A1A1A"}, 1000);
        $(".menu p").stop().animate({"color": "#202020"}, 1000);  
        $(".menu p a").stop().animate({"color": "#404040"}, 1000);  
        $(".social p, .social p a").stop().animate({"color": "#00577F"}, 1000);  
        $(".flydark").stop().animate({"opacity": "1"}, 1000);  
        $(".boxbiggray, .boxgray, .pboxbiggray").stop().animate({backgroundColor: "#262626"}, 1000);
        $(".subtitle").stop().animate({"color": "#FFFFFF"}, 1000);  
    }
    else if ($win >= $("#portfolio").offset().top - 50 && $win < $("#referencje").offset().top - 50) {
        window.menuup = '#BFBFBF';
        window.menuover = '#000000';
        window.socialup = '#80D7FF';
        window.socialover = '#00577F';
        $(".colleft, .boxemptyDesk, .boxcontainerleft").stop().animate({backgroundColor: "#FFFFFF"}, 1000);
        $(".colright, .boxcontainerright").stop().animate({backgroundColor: "#F2F2F2"}, 1000);
        $(".menu p").stop().animate({"color": "#DEDEDE"}, 1000);  
        $(".menu p a").stop().animate({"color": "#BFBFBF"}, 1000);  
        $(".social p, .social p a").stop().animate({"color": "#80D7FF"}, 1000);  
        $(".flydark").stop().animate({"opacity": "0"}, 1000);  
        $(".boxbiggray, .boxgray, .pboxbiggray").stop().animate({backgroundColor: "#D9D9D9"}, 1000);
        $(".subtitle").stop().animate({"color": "#000000"}, 1000);  
    }
});
    });
    return false;
});

});

Answer 2

Ok. I've got the solution! Here's the link: http://learn.jquery.com/effects/queue-and-dequeue-explained/

Pause works great, and do exactly what I want. First looping function pauses, when the second starts and when it's done, first function starts again and loop. And here's correct code:

$(document).ready(function() {
    $(window).scroll(function () {

        $.fn.pause = function(n) {
            return this.queue(function() {
                var el = this;
                setTimeout(function() {
                    return $(el).dequeue();
                }, n);
            });
        };

        $(window).queue(function switchColor() {
            var $win = $(window).scrollTop();
            if ($win < $("#portfolio").offset().top - 50 || $win >= $("#referencje").offset().top - 50) {
                window.menuup = '#404040';
                window.menuover = '#FFFFFF';
                window.socialup = '#00577F';
                window.socialover = '#80D7FF';
                $(".colleft, .boxemptyDesk, .boxcontainerleft").stop().animate({backgroundColor: "#000000"}, 1000);
                $(".colright, .boxcontainerright").stop().animate({backgroundColor: "#1A1A1A"}, 1000);
                $(".menu p").stop().animate({"color": "#202020"}, 1000);  
                $(".menu p a").stop().animate({"color": "#404040"}, 1000);  
                $(".social p, .social p a").stop().animate({"color": "#00577F"}, 1000);  
                $(".flydark").stop().animate({"opacity": "1"}, 1000);  
                $(".boxbiggray, .boxgray, .pboxbiggray").stop().animate({backgroundColor: "#262626"}, 1000);
                $(".subtitle").stop().animate({"color": "#FFFFFF"}, 1000);  
            }
            else if ($win >= $("#portfolio").offset().top - 50 && $win < $("#referencje").offset().top - 50) {
                window.menuup = '#BFBFBF';
                window.menuover = '#000000';
                window.socialup = '#80D7FF';
                window.socialover = '#00577F';
                $(".colleft, .boxemptyDesk, .boxcontainerleft").stop().animate({backgroundColor: "#FFFFFF"}, 1000);
                $(".colright, .boxcontainerright").stop().animate({backgroundColor: "#F2F2F2"}, 1000);
                $(".menu p").stop().animate({"color": "#DEDEDE"}, 1000);  
                $(".menu p a").stop().animate({"color": "#BFBFBF"}, 1000);  
                $(".social p, .social p a").stop().animate({"color": "#80D7FF"}, 1000);  
                $(".flydark").stop().animate({"opacity": "0"}, 1000);  
                $(".boxbiggray, .boxgray, .pboxbiggray").stop().animate({backgroundColor: "#D9D9D9"}, 1000);
                $(".subtitle").stop().animate({"color": "#000000"}, 1000);  
            }
            $(this).clearQueue();
        });
    });

    $(".scroll").click(function(event){     
        event.preventDefault();
        $(window).pause(2000);
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 2000);
        return false;
    });
});