2

抱歉，我的 JavaScript 技能有限，但我正在努力学习。

我正在尝试使用 scrollTop 计算制作平滑的滚动动画，其中绝对放置在彼此之上的 div 从零宽度开始并相互增长。

已经设置了一个fiddle来尝试解释：

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

问题是动画真的很不稳定，而且在某些地方完全是错误的。此外，如果我刷新浏览器，我的 div 会在完全错误的位置启动，并在我开始滚动时跳回原位。

在萤火虫中，计算通常是错误的，即使我不滚动也似乎永远不会停止。

    $(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 回答