title: scrollTop animations choppy
body: <p>Sorry, my JavaScript skills are limited, but I’m trying to learn.</p>
  
  <p>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. </p>
  
  <p>Have set up a fiddle to try to explain: </p>
  
  <p><a href="http://jsfiddle.net/vsP4e/1/" rel="nofollow">http://jsfiddle.net/vsP4e/1/</a></p>
  
  <p>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. </p>
  
  <p>In firebug the calculations are often wrong and seem to never stop going even when I am not scrolling. </p>
  
  <pre><code>    $(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&gt;=0 &amp;&amp; levelScroll&lt;=200){
                        $("#div1").css("width", "0px");
                        $('#div1').css("margin-left", (-(div1W)/2));
                        $('#div1').css("margin-top", (-(div1W)/2));
                      }
                      else if(levelScroll&gt;=200 &amp;&amp; levelScroll&lt;=500){
                        $("#div1").css("width", (levelScroll-200)+"px");
                        $('#div1').css("margin-left", (-(div1W)/2));
                        $('#div1').css("margin-top", (-(div1W)/2));
  
                      }
                      else if(levelScroll&gt;=500){
                        $("#div1").css("width", "188px");
                        $("#div1").css("margin-left", "-94px");
                        $("#div1").css("margin-top", "-94px");
                      }
  
                      //circle1
                      if(levelScroll&gt;=0 &amp;&amp; levelScroll&lt;=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&gt;=350 &amp;&amp; levelScroll&lt;=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&gt;=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));
          }
  </code></pre>