2

申し訳ありませんが、私の JavaScript スキルは限られていますが、学習しようとしています。

scrollTop 計算を使用してスムーズなスクロール アニメーションを作成しようとしています。この場合、絶対に配置された div は幅 0 から始まり、互いの後ろに成長します。

説明しようとするフィドルを設定しました：

http://jsfiddle.net/vsP4e/1/

問題は、アニメーションが途切れ途切れで、特定のポイントで単純に間違っていることです。また、ブラウザを更新すると、div がまったく間違った場所で起動し、スクロールを開始すると元の位置に戻ります。

firebug では、計算が間違っていることが多く、スクロールしていないときでも停止しないようです。

    $(document).ready(function() {  

        doStuff();

      $(document).scroll(function() {


        var levelScroll = $(document).scrollTop();


        doStuff();


          var show1 = $("#shaddow1").width();
          var c1w = $("#circle1").width();      
          var div1W = $("#div1").width();   

                    //div1
                    if(levelScroll>=0 && levelScroll<=200){
                      $("#div1").css("width", "0px");
                      $('#div1').css("margin-left", (-(div1W)/2));
                      $('#div1').css("margin-top", (-(div1W)/2));
                    }
                    else if(levelScroll>=200 && levelScroll<=500){
                      $("#div1").css("width", (levelScroll-200)+"px");
                      $('#div1').css("margin-left", (-(div1W)/2));
                      $('#div1').css("margin-top", (-(div1W)/2));

                    }
                    else if(levelScroll>=500){
                      $("#div1").css("width", "188px");
                      $("#div1").css("margin-left", "-94px");
                      $("#div1").css("margin-top", "-94px");
                    }

                    //circle1
                    if(levelScroll>=0 && levelScroll<=350){
                      $("#circle1").css("width", "0px");
                      $('#circle1').css("margin-left", (-(c1w)/2));
                      $('#circle1').css("margin-top", (-(c1w)/2));
                      $("#shaddow1").css("width", "0px");
                      $('#shaddow1').css("margin-left", (-(show1)/2));
                      $('#shaddow1').css("margin-top", (-(show1)/2));
                    }
                    else if(levelScroll>=350 && levelScroll<=650){
                      $("#circle1").css("width", (levelScroll-350)+"px");
                      $('#circle1').css("margin-left", (-(c1w)/2));
                      $('#circle1').css("margin-top", (-(c1w)/2));
                      $("#shaddow1").css("width", (levelScroll-300)+"px");
                      $('#shaddow1').css("margin-left", (-(show1)/2));
                      $('#shaddow1').css("margin-top", (-(show1)/2));

                    }
                    else if(levelScroll>=600){
                      $("#circle1").css("width", "232px");
                      $("#circle1").css("margin-left", "-116px");
                      $("#circle1").css("margin-top", "-116px");
                      $("#shaddow1").css("width", "232px");
                      $("#shaddow1").css("margin-left", "-116px");
                      $("#shaddow1").css("margin-top", "-116px");
                    }


                  });







    });

    function doStuff(){
            var show1 = $("#shaddow1").width();
            var c1w = $("#circle1").width();
            var div1W = $("#div1").width();

            $('#shaddow1').css("margin-left", (-(show1)/2));
            $('#shaddow1').css("margin-top", (-(show1)/2));

            $('#circle1').css("margin-left", (-(c1w)/2));
            $('#circle1').css("margin-top", (-(c1w)/2));

            $('#div1').css("margin-left", (-(div1W)/2));
            $('#div1').css("margin-top", (-(div1W)/2));
        }
4

1 に答える 1

1

条件の異なるレイヤーで同じ値を使用すると、競合が発生します。関数の例を次に示します。

if(levelScroll>=0 && levelScroll<=200){ ... }
else if(levelScroll>=200 && levelScroll<=500){ ... }
//this will create a conflict when levelScroll value came to 200

else if(levelScroll>350 && levelScroll<=650){ ... }
else if(levelScroll>=600){ ... }
//this equation also will create bigger problem

ここではjsFiddleが動作しています。

注：スクロールに異なる（あなたの例では2つある）条件を使用することはお勧めしません.間違いの可能性があり、ほとんどのブラウザはこれらの高度なjQueryアニメーションを処理できません.

于 2013-01-30T12:51:34.450 に答える