Question

Sorry, my JavaScript skills are limited, but I’m trying to learn.

I am trying to make a smooth scrolling animation with scrollTop calculations where divs placed absolute on top of each other start with zero width and grow behind each other.

Have set up a fiddle to try to explain:

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

The problem is that the animation is really choppy and simply wrong at certain points.
Also, it I refresh the browser my divs start up at totally wrong places and jumps back in place when I start scrolling.

In firebug the calculations are often wrong and seem to never stop going even when I am not scrolling.

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

Answer 1

If you use same values on different layers of a condition, it’ll create conflict. Here is an example from your function:

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

Here is working jsFiddle.

Note: I won’t suggest to use different (in your example you’ve got 2) conditions on scrolling, it raises mistake possibilty and most browser’s still can’t handle these advanced jQuery animations.