title: Jquery - Slide to a certain position in a div with overflow:hidden
body: <p>I have many spans in a div with <code>overflow:hidden;</code> Because the div width is fixed, at first only 5 spans are visible. On button click, how can I slide to a certain span making it visible?</p>
  
  <p><a href="http://jsfiddle.net/LdzTH/"><strong>LIVE JSFIDDLE</strong></a></p>
  
  <p>JQUERY</p>
  
  <pre><code>$("#gobtn").click(function (e)  {
      $("span.selected").removeClass('selected');
      var s = $('#nr').val();
      $("#c" + s).addClass('selected');
    //$("#c" + s).??? 
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class='container'&gt;
      &lt;div class='circles'&gt;
          &lt;span id='c1'&gt;1&lt;/span&gt;  
          &lt;span id='c2'&gt;2&lt;/span&gt;
          &lt;span id='c3'&gt;3&lt;/span&gt;
          &lt;span id='c4'&gt;4&lt;/span&gt; 
          &lt;span id='c5'&gt;5&lt;/span&gt;  
          &lt;span id='c6'&gt;6&lt;/span&gt;  
          &lt;span id='c7'&gt;7&lt;/span&gt;
          &lt;span id='c8'&gt;8&lt;/span&gt; 
          &lt;span id='c9'&gt;9&lt;/span&gt;  
          &lt;span id='c10'&gt;10&lt;/span&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;br /&gt;&lt;br/&gt;
  Go to circle nr. &lt;input id='nr' type="text" /&gt; 
  &lt;input type='button' id='gobtn'  value='go!'&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>span {
      border: solid 1px Silver;
      height: 14px;
      width: 14px;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      float: left;
      background-color: #fff;
      cursor: pointer;
      font-size:10px;
      text-align:center;
      margin-right:50px;
  }
  .circles {
      width:9000px;
  }
  .container {
      width:300px;
      display:block;    
      overflow:hidden;
      border:solid 2px #eee;
      padding:10px;
  }
  .selected
  {
      background-color:Yellow;
  }
  </code></pre>