How to implement the fade effect _javascript skill of JS

Fade effect, often used in daily projects, but there is no similar method of native JS, and sometimes small pages are not worth introducing a jquery library, so they wrote a, has been encapsulated, useful friends can be used directly. Another method of setting element transparency in the code is to set the IE rule (0~100), and if you change to the standard setting method (0.00~1.00), consider floating point exact expression difference when used below.

Parameter description:
FadeIn () and fadeout () have three parameters, the first is the event , must fill in, the second is the fade speed , positive integer, the size of their own trade-offs, optional parameters; The third is to specify the transparency value to fade in ( Similar to the Fadeto () in jquery, the positive integer value of the 0~100 is also an optional parameter.
Key Code:

 Fade in effect (include fade to specified transparency) function fadeIn (Elem, speed, opacity) {/* parameter description * elem==> element to fade in * speed==> fade degrees, positive integers (optional) * opacity==> fade to specified transparency, 0~100 (optional) * * Speedspeed = Speed | | 
  20; opacityopacity = Opacity | | 
  100; 
  Displays the element, and the element value is 0 opacity (invisible) Elem.style.display = ' block '; 
  Ibase.setopacity (elem, 0); 
  Initialization transparency Change value is 0 var val = 0; 
   The loop increments the transparent value by 5, which is the Fade effect (function () {ibase.setopacity (Elem, Val); 
   val = 5; 
 If (Val <= opacity) {settimeout (Arguments.callee, Speed)}}) (); }//Fade effect (including fade to specified transparency) function fadeout (Elem, speed, opacity) {/* * parameter description * elem==> the element to fade in * speed==& gt; Fade in speed, positive integer (optional) * opacity==> fade to specified transparency, 0~100 (optional)/Speedspeed = Speed | | 
  20; opacityopacity = Opacity | | 
  0; 
  Initialization transparency Change value is 0 var val = 100; 
   The loop decrements the transparent value by 5, that is, the Fade effect (function () {ibase.setopacity (Elem, Val); 
   Val-= 5; 
   If (Val >= opacity) {settimeout (Arguments.callee, speed); }else if (Val < 0) {//Element transparency is 0 after hidden element elem.style.display = ' None '; 
 } 
  })();  }

Effect Chart:

Core code, you can directly copy the code to view the effect

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

    above is the original JS to achieve the fade effect of all the code, I hope to help you learn.