jquery - 滑動到一個特定的位置在一個div與溢出：隱藏

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

添加position: relative到circles CLAS秒。並使用animate方法設置left屬性。

我做了一個。嘗試this。你可以隨心所欲改善這一點。

Answer 2

動畫的circles類的左邊界在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/

仍然需要微調，以獲得號碼正是您想要他們，即應選擇的永遠是中間。