Jquery - オーバーフローでdivの特定の位置にスライド：hidden

Question

overflow:hidden;でdivにスパンがたくさんあるdivの幅が固定されているため、最初は5スパンしか表示されません。ボタンをクリックすると、特定のスパンにスライドさせて見えるようにするにはどうすればいいですか？

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

circles CLASにposition: relativeを追加s。 animateメソッドでleftプロパティを設定します。

私は作りました。試してくださいthis。必要に応じてこれを改善することができます。

Answer 2

click機能にcirclesクラスの左マージンをアニメーション：まだ細かいあなたがそれらをしたい場所を正確に番号を得るには調整必要

$("#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/

、つまりは常に中でも、選択しなければなりません真ん中。