Jquery - Slide to a certain position in a div with overflow:hidden
jquery, overflow
Solution
Add a `position: relative` to the `circles` class. And set the `left` property with an `animate` method.
I made one. Try this. You can improve this as you want.
Problem
I have many spans in a div with `overflow:hidden;` Because the div width is fixed, at first only 5 spans are visible. On button click, how can I slide to a certain span making it visible? 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; } ```