title: Techniques for smoother image animation with JS/CSS
body: <p>I am using the following code to glide an image across the top layer of a webpage but its a little jittery, giving streaky vertical lines down the image especially when over content with many nested elements. This is the case even when the border is set to zero. Any suggestions for a smoother method for gliding an image with JS/CSS?</p>
  
  <pre><code>border=4;
  pps=250;  // speed of glide (pixels per second)
  skip=2;  // e.g. if set to 10 will skip 9 in 10 pixels
  refresh=3;  // how often looks to see if move needed in milliseconds
  
  elem = document.createElement("img");
  elem.id = 'img_id';
  elem.style.zIndex="2000";
  elem.style.position="fixed";
  elem.style.top=0;
  elem.style.left=0;
  elem.src='http://farm7.static.flickr.com/6095/6301314495_69e6d9eb5c_m.jpg';
  elem.style.border=border+'px solid black';
  elem.style.cursor='pointer';
  document.body.insertBefore(elem,null);
  
  pos_start = -250;
  pos_current = pos_start;
  pos_finish = 20000;
  
  var timer = new Date().getTime();
  move();
  
  function move ()
  {
    var elapsed = new Date().getTime() - timer;
    var pos_new = Math.floor((pos_start+pps*elapsed/1000)/skip)*skip;
  
    if (pos_new != pos_current)
    {
      if (pos_new&gt;pos_finish)
        pos_new=pos_finish;
  
      $("#img_id").css('left', pos_new);
      if (pos_new==pos_finish)
        return;
  
      pos_current = pos_new;
    }
  
    t = setTimeout("move()", refresh);
  }
  </code></pre>