fade effect using javascript no jquery?

Question

jQuery derived from javascript have beautiful method of creating fade effect.

But how can I achieve same height using my own custom javascript code?

I wanted the most simple one.. which fades out to zero.

Answer 1

Here is a pure implementation of fade in and fade out effect using JavaScript.

1. Make use of CSS Opacity property

2. During fade out process, we reduce the opacity value from 0.9 to 0

3. Similarly fade in process increase the 0.0 to 0.9

4. For IE its 10 to 90

5. Use setTimeout() function to call the fade function recursively with delay and increase / decrease opacity value to achieve the fade effect

     function fadeOut(id,val){ if(isNaN(val)){ val = 9;}
     document.getElementById(id).style.opacity='0.'+val;
     //For IE
     document.getElementById(id).style.filter='alpha(opacity='+val+'0)';
     if(val>0){
       val--;
       setTimeout('fadeOut("'+id+'",'+val+')',90);
     }else{return;}
   }
   
   function fadeIn(id,val){
   // ID of the element to fade, Fade value[min value is 0]
     if(isNaN(val)){ val = 0;}
     document.getElementById(id).style.opacity='0.'+val;
     //For IE
     document.getElementById(id).style.filter='alpha(opacity='+val+'0)';
     if(val<9){
       val++;
       setTimeout('fadeIn("'+id+'",'+val+')',90);
     }else{return;}
   }
   

Cheers -Clain