How js achieves fade-in and fade-out effect _ javascript tips-js tutorial

This article mainly introduces how native js achieves fade-in and fade-out effects. The article provides you with a encapsulated code. If you need it, you can refer to the fade-in and fade-out effects, it is often used in daily projects. Unfortunately, there is no similar method for native JS, and sometimes a small page is not worth introducing a jQuery library, so I wrote one myself, which is encapsulated, useful friends can be used directly. The Code also contains a method to set the transparency of elements, which is based on IE rules (0 ~ 100). If it is changed to the standard setting method (0.00 ~ 1.00), when using the following, consider floating point exact expression difference.

Parameter description:
Both fadeIn () and fadeOut () have three parameters. The first one isEvent, Required. The second isFade-in and fade-out speed, Positive integer, which can be weighed by itself. An optional parameter. The third parameter is specified.Transparency of Fade-in and fade-out(Similar to fadeTo () in jQuery), 0 ~ A positive integer of 100, which is also an optional parameter.
Key code:

// Fade-in effect (including fade-in to specified transparency) function fadeIn (elem, speed, opacity) {/** parameter description * elem => elements needing to fade in * speed => fade in speed, positive integer (optional) * opacity => fade in to the specified transparency, 0 ~ 100 (optional) */speedspeed = speed | 20; opacityopacity = opacity | 100; // display the element and set the element value to 0 transparency (invisible) elem. style. display = 'block'; iBase. setOpacity (elem, 0); // The variable value of the initialization transparency is 0 var val = 0; // The transparency value is increased by 5 in a loop, that is, the fade-in effect (function () {iBase. setOpacity (elem, val); val + = 5; if (val <= opacity) {setTimeout (arguments. callee, speed) }}) () ;}// fade-out effect (including fade-out to the specified transparency) function fadeOut (elem, speed, opacity) {/** parameter description * elem => elements to fade in * Speed => fade-in speed, positive integer (optional) * opacity => fade-in to the specified transparency, 0 ~ 100 (optional) */speedspeed = speed | 20; opacityopacity = opacity | 0; // The initial transparency change value is 0 var val = 100; // In a loop, the transparency value is decreased to 5, that is, the fade-out effect (function () {iBase. setOpacity (elem, val); val-= 5; if (val> = opacity) {setTimeout (arguments. callee, speed);} else if (val <0) {// hide the element elem after the transparency of the element is 0. style. display = 'none ';}})();}

:

Core code. You canView results directly

   
  Native JS achieves fade-in and fade-out effect Script window. onload = function () {// var iBase = {Id: function (name) {return document. getElementById (name) ;}, // sets the element transparency. The transparency value is calculated according to the IE rule, that is, 0 ~ 100 SetOpacity: function (ev, v) {ev. filters? Ev. style. filter = 'Alpha (opacity = '+ v +') ': ev. style. opacity = v/100; }}// fade-in effect (including fade-in to specified transparency) function fadeIn (elem, speed, opacity) {/** parameter description * elem => elements needing to fade in * speed => fade in speed, positive integer (optional) * opacity => fade in to the specified transparency, 0 ~ 100 (optional) */speedspeed = speed | 20; opacityopacity = opacity | 100; // display the element and set the element value to 0 transparency (invisible) elem. style. display = 'block'; iBase. setOpacity (elem, 0); // The variable value of the initialization transparency is 0 var val = 0; // The transparency value is increased by 5 in a loop, that is, the fade-in effect (function () {iBase. setOpacity (elem, val); val + = 5; if (val <= opacity) {setTimeout (arguments. callee, speed) }}) () ;}// fade-out effect (including fade-out to the specified transparency) function fadeOut (elem, speed, opacity) {/** parameter description * elem => elements to fade in * Speed => fade-in speed, positive integer (optional) * opacity => fade-in to the specified transparency, 0 ~ 100 (optional) */speedspeed = speed | 20; opacityopacity = opacity | 0; // The initial transparency change value is 0 var val = 100; // In a loop, the transparency value is decreased to 5, that is, the fade-out effect (function () {iBase. setOpacity (elem, val); val-= 5; if (val> = opacity) {setTimeout (arguments. callee, speed);} else if (val <0) {// hide the element elem after the transparency of the element is 0. style. display = 'none' ;}}) () ;}var btns = iBase. id ('Demo '). getElementsByTagName ('input'); btns [0]. onclick = function () {fadeIn (iBase. id ('fadin');} btns [1]. onclick = function () {fadeOut (iBase. id ('fadeout'), 40);} btns [2]. onclick = function () {fadeOut (iBase. id ('fadeto '), 20, 10);} script   
  
  
      
    
Foot home
   
   
A professional website construction resource and Script Programming learning website in China, provides programming materials such as asp, php, asp.net, javascript, jquery, vbscript, dos batch processing, web page creation, network programming, and website construction.
  
    
      
     
Foot home
   
   
A professional website construction resource and Script Programming learning website in China, provides programming materials such as asp, php, asp.net, javascript, jquery, vbscript, dos batch processing, web page creation, network programming, and website construction.
  
    
      
     
Foot home
   
   
A professional website construction resource and Script Programming learning website in China, provides programming materials such as asp, php, asp.net, javascript, jquery, vbscript, dos batch processing, web page creation, network programming, and website construction.
  
 
 
     

The above is all the code for native js to implement the fade-in and fade-out effect. I hope it will be helpful for your learning.