Fade HTML element with raw javascript
- by jnkrois
It's my second question of the day related to the same problem, so I apologize for that.
I was able to put together a function to "fade out" an element, and it works just fine, my problem is that when I try to reverse it, so the element "fades in" it does not work.
I've tried to change the obvious, but I can't understand what I'm doing wrong.
My code so far is as follows:
Given I have a "div" like so:
<div id="test" style="width:200px; height:200px; display:block; opacity:1; background-color:red;"></div>
The JavaScript function that I'm using to fade it out is:
var getElement = document.getElementById('test');
function fadeOut(elem, speed){
if(!elem.style.opacity){
elem.style.opacity = 1;
}
var desvanecer = setInterval(function(){
elem.style.opacity -= .02;
if(elem.style.opacity < 0){
clearInterval(desvanecer);
}
}, speed / 50);
}
fadeOut(getElement, 500);
Could somebody take a look at this and let me know what I'm doing wrong, all I want to do is "FADE IN" an element to an opacity equal to "1".
By the way, I can't use jQuery, however I'm eager to learn this way.
Thanks
