title: jQuery horizontal scrolling display
body: <p>I'm making a horizontal scroller using jQuery. I have it working using the following</p>
  
  <pre><code>var wrapper = $('#wrapper'),
      content = $('#scroll-content');
  
  
  wrapper.bind('mousemove', function(e){
  
      var wrapper_width = wrapper.width(),
          content_width = content.width();
          //wrapper and content width
  
      var tmp  = e.pageX * (content.outerWidth() - wrapper.outerWidth()) / wrapper.outerWidth();
      //calculate new left margin
  
      content.css({ 'margin-left': '-'+tmp+'px' });
      //set margin according
  
      /*content.animate({
          'margin-left': '-'+tmp+'px'
      }, 30, 'easeOutSine');*/
  });
  </code></pre>
  
  <p>Every mousemove event I calculate the new left margin, the slider spans 100% width of the screen.</p>
  
  <p>This works, but I have two problems. It seems bad practise to be calling a calculation on every mousemove event as there are hundreds. Is there a better way, maybe using timers?</p>
  
  <p>Another question, when the user first hovers the slider it jumps into place, I tried to use animate so that the slider would slide down to the correct position, but didn't seem to work. (commented at the bottom)</p>
  
  <p>any help with these problems would be great. Thanks</p>