Jquery-滑动到div中的某个位置，溢出：隐藏

我在div中有许多跨距，带有

overflow:hidden因为div宽度是固定的，所以最初只有5个跨距可见。单击按钮时，我如何滑动到某个跨度使其可见


JQUERY

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

HTML

将
位置：相对
添加到
圆圈
类。并使用
animate
方法设置
left
属性

我做了一个。尝试您可以根据需要对此进行改进。
在
单击功能中设置
圆圈
类左边距的动画：

$("#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);
});


仍然需要微调以使数字精确地在你想要的地方，即应该总是选择在中间。
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;
}

$("#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);
});