I've designed some boxes that function similar to notifications, but now I want to smoothly slide them in from the left instead of just fading in.
I know that I need to use .animate rather than .fadeIn to achieve this effect.
The code snippet I'm considering using for the animation is as follows (although I'm not certain it will work):
animate(
document.getElementByClassName('notification'),
"margin-left","px",50,0,200;
"opacity",0,1,200;
);
However, I'm unsure how to integrate this into my existing function :(
Below is my current JavaScript code:
var myVar;
function showDiv() {
var random = Math.floor(Math.random() * $('.notification').length);
$('.notification').eq(random).prependTo('.container').fadeIn(200).delay(3000).fadeOut(200);
createRandomInterval();
}
function createRandomInterval() {
setTimeout(showDiv, 500 + Math.random() * 4000);
}
$(document).ready(function() {
createRandomInterval();
});
Here is my complete fiddle: https://jsfiddle.net/brapbg1h/