Jquery - Verschieben an eine bestimmte Stelle in einem div mit Überlauf: Versteckt

Question

Ich habe viele Spannen in einem div mit overflow:hidden; Da die div Breite festgelegt ist, sind zunächst nur 5 Spannen sichtbar. Wie kann ich auf Knopfdruck zu einer bestimmten Spanne gleiten, um sie sichtbar zu machen?

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

hinzufügen position: relative den circles cla s. Und setzen Sie die left Eigenschaft mit einer animate Methode.

Ich habe eins gemacht. Versuchen Sie this. Sie können dies verbessern, wie Sie möchten.

Answer 2

Animieren Sie den linken Rand der circles Klasse in der click Funktion:

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

muss noch fein abgestimmt genau die Zahlen zu bekommen, wo Sie wollen, also sollte immer in sein selected die Mitte.