Jquery - Scorrere fino a una determinata posizione in un div con overflow: nascosto

Question

Ho molti span in un div con overflow:hidden; Poiché la larghezza div è fissa, all'inizio sono visibili solo 5 span. Al clic del pulsante, come posso scorrere verso una determinata estensione rendendolo visibile?

LIVE JSFIDDLE

jQuery

$("#gobtn").click(function (e) { 
    $("span.selected").removeClass('selected'); 
    var s = $('#nr').val(); 
    $("#c" + s).addClass('selected'); 
    //$("#c" + s).??? 
}); 

HTML

<div class='container'> 
    <div class='circles'> 
     <span id='c1'>1</span> 
     <span id='c2'>2</span> 
     <span id='c3'>3</span> 
     <span id='c4'>4</span> 
     <span id='c5'>5</span> 
     <span id='c6'>6</span> 
     <span id='c7'>7</span> 
     <span id='c8'>8</span> 
     <span id='c9'>9</span> 
     <span id='c10'>10</span> 
    </div> 
</div> 
<br /><br/> 
Go to circle nr. <input id='nr' type="text" /> 
<input type='button' id='gobtn' value='go!'> 

CSS

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; 
} 

Answer 1

Aggiungi un position: relative alle circles clas S. E impostare la proprietà left con un metodo animate.

Ne ho fatto uno. Prova this. Puoi migliorarlo come vuoi.

Answer 2

animare il margine sinistro della classe circles nella funzione click:

$("#gobtn").click(function (e) { 
    $("span.selected").removeClass('selected'); 
    var s = $('#nr').val(); 
    $("#c" + s).addClass('selected'); 

    $(".circles").animate({ 
     marginLeft: '-' + (parseInt(s-1) * 40) + 'px' 
    }, 500); 
}); 

http://jsfiddle.net/LdzTH/15/

deve ancora perfezionato per ottenere i numeri esattamente dove vuoi, deve cioè selezionati in sempre in la metà.