Storing divs in an array and deleting them after appending is my current method.
Now, I'm looking to incorporate a fade-in and fade-out effect on each div with a delay.
Check out this code snippet :
var arr = $(".notification");
function display(){
let rand = Math.floor(Math.random() * arr.length)
$("#result").append(arr.eq(rand))
arr = arr.not(":eq("+rand+")")
if(arr.length>0) createRandomInterval();
}
function createRandomInterval() {
setTimeout(display, 500 + Math.random() * 4000);
}
createRandomInterval().notification {
background-color: red;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 200px;
margin-bottom: 10px;
}
.hidden {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden">
<div class="notification">object 1</div>
<div class="notification">object 2</div>
<div class="notification">object 3</div>
<div class="notification">object 4</div>
</div>
<div id="result"></div>I attempted to include
.fadeIn(400).delay(3000).fadeOut(400);
in my function, but all divs fade in and out simultaneously.
My goal is for each div, upon appending, to fade in and then fade out after 3 seconds.
Here's my fiddle without the animation: https://jsfiddle.net/0ydo3kvd/