1

わかりました、私はjQueryを初めて使用し、専門家ではありません。これが私のコードの最初の部分です：

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

...そして2番目のもの：

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

問題は、最初の部分の実行中に、このコードの 2 番目の部分を一時停止する必要があることです。そして、どうやってそれを行うのか、まったくわかりません...ああ、このコードを一時停止する必要があります.両方が同時に非常に遅く動作し、アニメーションがスムーズではないためです. 誰かが助けることができますか？

4

2 に答える 2

0

Ok。私は解決策を持っています！リンクは次のとおりです。http://learn.jquery.com/effects/queue-and-dequeue-explained/

一時停止はうまく機能し、私がやりたいことを正確に行います。最初のループ関数は一時停止し、2 番目のループが開始され、完了すると、最初の関数が再び開始されてループします。そして、ここに正しいコードがあります：

$(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;
    });
});
于 2013-06-16T21:20:58.103 に答える