Result
http://jsfiddle.net/kachibito/HqqA3/1/embedded/result,js,css,html
jQuery
function next() { //300pxスライドさせる $('#in').animate({marginLeft: '-300px'}, 600, function() { var reStart = $('#in div:first').detach(); $('#in').css('marginLeft', '0px').append(reStart); }); }
detach()はremove()とは動作が異なる。
css
#out { width:300px; height: 100px; overflow:hidden; } #in{ width: 1200px; } a{color:#4f4742; margin:15px;} #in div { float:left; width: 300px; height: 100px; background: #b0c6e1; color:#4f4742; margin-right:3px; font-size: 25px ; }
html
<a href="javascript:" onclick="next()">click</a> <div id="out"> <div id="in"> <div>item 1</div> <div>item 2</div> <div>item 3</div> <div>item 4</div> </div> </div>