jQuery, как я могу приостановить функцию?

Question

jQuery, как я могу приостановить функцию?

Хорошо, я новичок в jQuery и не эксперт. Вот первая часть моего кода:

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

... и второй:

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

Проблема в том, что я должен приостановить вторую часть этого кода, пока выполняется первая часть. И я понятия не имею, как это сделать... О, я должен приостановить этот код, потому что оба одновременно работают очень медленно, а анимация не плавная. Кто-то может помочь?

1

jquery function performance pausing-execution

Источник

user2486208 14 июн '13 в 13:44

2 ответа

Другие вопросы по тегам jquery function performance pausing-execution

user2486208 16 июн '13 в 21:20 2013-06-16 21:20 · Answer 1 · 2013-06-16 21:20

Хорошо. У меня есть решение! Вот ссылка: http://learn.jquery.com/effects/queue-and-dequeue-explained/

Пауза прекрасно работает, и делай именно то, что я хочу. Первая функция цикла останавливается, когда запускается вторая и когда она завершается, первая функция запускается снова и выполняется цикл. И вот правильный код:

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

user1916140 14 июн '13 в 13:54 2013-06-14 13:54 · Answer 2 · 2013-06-14 13:54

То, что вы можете попробовать, это использовать "полный" обратный вызов: http://api.jquery.com/animate/

complete Тип: Function() Функция, вызываемая после завершения анимации.

Таким образом, вместо двух экземпляров $(document).ready(...) у вас будет только один, и ваш первый фрагмент кода будет выглядеть так:

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

});