Currently, when I utilize .appendTo(".wrapper") as shown in the code below, it eliminates the animation effect. My goal is to have the div on the far left slide out of view, triggering an overflow hidden effect, and then be placed at the end of the slide creating a continuous slideshow effect by repeating the previous divs.
$(document).ready( function(){
var x = 0;
$(".next").on("click", function(){
x -= 245;
console.log($(".element").length)
$(".element").each(function(i, e){
console.log(i)
$(this).eq(i).css({"marginLeft" : x +"px"}).appendTo(".wrapper");
})
})
});
CSS:
.mgcont{
margin:5% auto;
width:970px;
overflow: hidden;
border: 2px solid gray;
}
.wrapper{
/*overflow: hidden;*/
white-space: nowrap;
width:960px;
}
.element{
width: 240px;
height: 300px;
background: tomato;
display: inline-block;
margin-left: 10px;
transition: margin 3s;
}
.prev{
float: right;
}
HTML:
<div class="mgcont">
<button class="next">next</button>
<button class="prev">PREV</button>
<div class="wrapper">
<div class="element">1</div>
<div class="element">2</div>
<div class="element">3</div>
<div class="element">4</div>
<div class="element">5</div>
<div class="element">6</div>
</div>
</div>