How does native JavaScript achieve fade-in and fade-out?

Fade-in and fade-out effects are often used in daily projects. Unfortunately, native JS does not have similar methods, and sometimes small pages and 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) */speed = speed | 20; opacity = 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 needing to fade in * speed ==> fade in speed, positive integer (Optional) * opacity ==> fades in to the specified transparency, 0 ~ 100 (optional) */speed = speed | 20; opacity = 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

Fade-in and fade-out results are often used in daily projects. Unfortunately, native JS does not have a similar method, and sometimes a small page is not worth introducing a jQuery library, so I wrote it myself, 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: fadeIn () and fadeOut () have three parameters. The first parameter is an event and is required. The second parameter is the fade-in and fade-out speed, positive integer, And the size is weighed by yourself. An optional parameter; third, specify the transparency (similar to fadeTo () in jQuery), 0 ~ A positive integer of 100, which is also an optional parameter.

Effect demonstration

Use a non-IE6 browser and wait until the page is loaded before testing.

Blog: http://www.nowamagic.net

Welcome to nowamagic.net

Blog: http://www.nowamagic.net

Welcome to nowamagic.net

Blog: http://www.nowamagic.net

Welcome to nowamagic.net

JavaScript code

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) */speed = speed | 20; opacity = 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 needing to fade in * speed ==> fade in speed, positive integer (Optional) * opacity ==> fades in to the specified transparency, 0 ~ 100 (optional) */speed = speed | 20; opacity = 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 );}}

Address of this article: http://www.nowamagic.net/librarys/veda/detail/951,welcome.