Fade in an HTML element with raw javascript over 500 miliseconds.

Question

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.

Answer 1

You should use jquery, mootools or extjs for something like this.

But basically you need to do this:

var id = setInterval(function() {
   showMask.style.opacity += .05;
   if (showMask.style.opacity >= 1)
   {
      clearInterval(id);
   }
},200)

This will fade in over 2 seconds.

Answer 2

Rack my up as another who strongly advises using jQuery. In my work environment I often face similar challenges due to corporate bosses who are basically afraid of any and all advancement, so I understand your predicament. But, that being said, my suggestion is instead of spending time re-writing the wheel, spend time figuring out how to use the proper solution, which is, in this case jQuery or other javascript framework. If you can write your own function, you can use jQuery.

<script>
  document.write("<scr" + "ipt src='http://givemejquery'&gt;&lt;/scr" + "ipt>");
</script>