Fade in an HTML element with raw javascript over 500 miliseconds.
- by Juan C. Rois
Hello everybody,
Once again I find myself stuck by something that I just don't understand. Any help would be appreciated.
I'm working on a modal window, you click something and the background is masked and a modal window shows some content.
I have a div with "display:none" and "opacity:0", and when the user triggers the modal, this div will overlay everything and have certain transparency to it.
In my mind, what I need to do is:
Set the opacity
Perform a "for" loop that will check if the opacity is less than the desired value.
Inside this loop, perform a "setInterval" to gradually increment the value of the opacity until it reaches the desired value.
When the desired value has been reached, perform an "if" statement to "clearInterval".
My code so far is as follows:
var showMask = document.getElementById('mask');
function fireModal(){
showMask.style.opacity = 0;
showMask.style.display = 'block';
var getCurrentOpacity = showMask.style.opacity;
var increaseOpacity = 0.02;
var finalOpacity = 0.7;
var intervalIncrement = 20;
var timeLapse = 500;
function fadeIn(){
for(var i = getCurrentOpacity; i < finalOpacity; i++){
setInterval(function(){
showMask.style.opacity = i;
}, intervalIncrement)
}
if(getCurrentOpacity == finalOpacity){
clearInterval();
}
}
fadeIn();
}
As you all can guess, this is not working, all it does is set the opacity to "1" without gradually fade it in.
Thanks in advance for your help.
