gogoWebsite

Native JS implements fade-in and fade effect (fadeIn/fadeOut/fadeTo)

Updated to 2 days ago
//Fake in effect (including fade in to specified transparency)
 function fadeIn(elem, speed, opacity){
	 /*
	  * Parameter description
	  * elem==>Elements that need to fade in
	  * speed==>fade-in speed, positive integer (optional)
	  * opacity==>Fake in to the specified transparency, 0~100 (optional)
	  */
     speed = speed || 20;
     opacity = opacity || 100;
	 //Show the element and set the element value to 0 transparency (not visible)
      = 'block';
     (elem, 0);
	 //Initialize transparency change value is 0
     var val = 0;
	 //The loop increments the transparent value by 5, that is, the effect is faded into
     (function(){
         (elem, val);
         val += 5;
         if (val <= opacity) {
             setTimeout(, speed)
         }
     })();
 }

 //Fake out effect (including fade out to specified transparency)
 function fadeOut(elem, speed, opacity){
	 /*
	  * Parameter description
	  * elem==>Elements that need to fade in
	  * speed==>fade-in speed, positive integer (optional)
	  * opacity==>Fake in to the specified transparency, 0~100 (optional)
	  */
     speed = speed || 20;
     opacity = opacity || 0;
     //Initialize transparency change value is 0
     var val = 100;
	 //The loop decreases the transparent value by 5, that is, the effect is faded out
     (function(){
         (elem, val);
         val -= 5;
         if (val >= opacity) {
             setTimeout(, speed);
         }else if (val < 0) {
			 //Hidden elements after element transparency is 0
              = 'none';
         }
     })();
 }