title: Best way to do a horizontal scrolling pane in jQuery?
body: <p>I came up with the solution below. It works great, but I'm curious to know if there's a more efficient way of doing it. Thanks!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="magic-pane" style="width: 300px; height: 400px; background: #eee; overflow: hidden"&gt;
      &lt;div id="scroller" style="width: 600px; height: 100%; left: 0px; position: relative"&gt;
          &lt;div id="pane1" style="width: 300px; height: 100%; background: #efe; float: left"&gt;
              &lt;span id="pane1-clicker"&gt;Whee, click me!&lt;/span&gt;
          &lt;/div&gt;
          &lt;div id="pane2" style="width: 300px; height: 100%; background: #fee; float: left"&gt;
              &lt;span id="pane2-clicker"&gt;Whoosh! Click me!&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>$(document).ready(function() {
      $('#pane1-clicker').click(function() {
          $('#scroller').animate({ left: '-300px' }, 500);
      });
      $('#pane2-clicker').click(function() {
          $('#scroller').animate({ left: '0' }, 500);
      });
  });
  </code></pre>
  
  <p>So basically, the magic-pane is a small viewport that's 300px wide. Inside it is a scroller that's twice as wide and contains two divs side-by-side. Pretty simple, but again, just wondering if there's a more efficient way of coding this.</p>
  
  <p><a href="http://jsfiddle.net/zzUA8/" rel="nofollow">Demo</a></p>