I have a container div and an array. Initially, I prepend 3 divs to the container div. Then, after a delay of 3 seconds, I remove the 3rd div. Using jQuery animate, I transition the 2 remaining divs to the right side before adding a new div.
The issue arises when the newly added div does not appear in the desired location, causing a large space between it and the remaining 2 divs. Additionally, a vertical scroll bar unexpectedly appears.
$(document).ready(function()
{
addBoxes();
setInterval(function() { removeBox(); }, 3000)
});
var boxArray = [
{name: "Box 1",},
{name: "Box 2",},
{name: "Box 3",},
{name: "Box 4",},
{name: "Box 5",},
{name: "Box 6",},
{name: "Box 7",},
{name: "Box 8",},
{name: "Box 9",},
{name: "Box 10",},
{name: "Box 11",},
]
function addBoxes()
{
for (var i = 0; i <= 2; i++)
{
$(".container").prepend("<div class='box animated fadeInLeft faster'>"+ boxArray[i].name +"</div>");
}
boxArray.splice(0, 3);
}
function removeBox()
{
if (boxArray.length === 0)
{
}
else
{
var card = $(".container .box:nth-child(3)");
card.addClass("animated fadeOutRight faster").one(function()
{
card.unbind().remove();
})
//addSingleBox();
animateRemainingBox();
setTimeout(function()
{
addSingleBox();
}, 400)
}
}
function addSingleBox()
{
$(".container").prepend("<div class='box'>"+ boxArray[0].name +"</div>");
boxArray.shift();
}
function animateRemainingBox()
{
$(".box").animate({left: $(".box").width()})
}.container {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
.box {
height: 80%;
width: 32%;
border: 1px solid black;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
background: rgb(239, 242, 244);
box-shadow: 4px 8px 16px #808080;
display: inline-block;
position: relative;
overflow: hidden;
}
.box:nth-child(2) {
margin-left: 1.7%;
margin-right: 1.7%;
}
.box:nth-child(1) {
margin: 0px;
}
.box:nth-child(3) {
margin: 0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
</div>