Question

好的，我是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);  
        }
    });
});

问题是，我必须暂停此代码的第二部分，而第一部分正在执行。我不知道怎么做...哦，我必须暂停这段代码，因为两者同时工作得非常慢，动画也不顺畅。有人可以帮忙吗？

Answer 1

您可能会尝试使用“完整”回调：http://api.jquery.com/animate/

完整类型：功能（）动画完成后调用的函数。

所以没有2个$（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;
});

}）;

Answer 2

确定。我有解决方案！这是链接：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;
    });
});

jQuery如何暂停该功能？

2 个答案: