title: smooth scrolling images with jquery
body: <p>I am making a logo slider using jQuery. My first idea is to use a large single image composed of all logos placed as background and animate its position. The idea behind this was to reduce http request by loading only a single file. </p>
  
  <p>The jQuery code is something like this:</p>
  
  <pre><code>&lt;script&gt;
    $(function(){
      var current = 0;
      function bgscroll(){
        // 20 pixel row at a time
        current -= 20;
        // move the background with backgrond-position css properties
        $('#slider').animate({'background-position' : current+'px'}, 100, 'linear');}
        setInterval(bgscroll, 1);
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>However there is a problem with animation. It flickers and its not smooth.
  So anyone have any ideas how I can make this animation smoother? </p>
  
  <p>Current CSS</p>
  
  <pre><code>#slider{
    height: 97px;
    overflow: hidden;
    background-image: url("../img/logos-long.jpg");
    background-repeat: repeat-x;
    width: 100%;
  }
  </code></pre>