JQuery div.pan animation
http://stackoverflow.com/questions/14038155/how-to-implement-carousel-effect-using-jquery-javascript/14038382#comment19408145_14038382
HTML
<div class="slider">
<div class="pan">
<div>lorem</div>
<div>ipsum</div>
</div>
</div>
<div class="slider unoverflow">
<div class="pan">
<div>lorem</div>
<div>ipsum</div>
</div>
</div>
CSS
body {
background: #888;
}
.slider {
border: 2px dotted #000;
width: 30%;
height: 100px;
z-index: 2;
margin: 3% auto;
}
.pan {
width: 200%;
height: 90px;
background: #FFF;
z-index: 1;
margin: 5px;
}
.pan div {
float: left;
width: 40%;
margin: 5%;
}
.unoverflow {
overflow: hidden;
}
JavaScript
// .pan role in slider
function animation(){
var target = 0 - parseInt($('.pan').width()) / 2;
$('.pan').stop().animate({"margin-left": target}, 2000, function(){
});
}
animation();