, when it comes to the gradual display and disappearance of JS, most friends think of fadeIn (), fadeOut () or fadeToggle () in JQuery. But if only to introduce such an effect, to call a huge JQuery library? Or, by implementing some functions with native JS to improve my ~

, I simply studied the effect of pure JS code writing fade in and fade out.

if an error occurs, please indicate in the comments, I may correct their own mistakes

css

 < style> style; div {width: 100px; height: 100px; background-color: #1d7db1 opacity:0; < /style> 

;}; first we look at the first edition of the fadeIn function method: first look at the idea of

 function fadeIn (ELE, speed) {let num = 0; let = setInterval (time (=>); {num + = speed; ele.style.opacity = num (if / 100; num > clearInterval (time = 100) {}}); / / clear timer, 30);}} 

when the effect temporarily realized, some things are not so simple. If a number of trigger effects occur, the setInterval will be used multiple times, and there are some headaches for BUG.

to solve this problem, there is a solution: add a global state to prevent multiple triggering of setInterval.

 let Fadeflag = true; function fadeIn (ELE, speed) {let num = 0; if (Fadeflag) {let = setInterval (time (=>); {num + = speed; Fadeflag = false; ele.style.opacity = num / if (Num 100; > = 100) {clearInterval (time; Fadeflag) = true;}}, 30);}}

compatibility issues!!!

 set: function to look at the code (elem, Num) {elem.style.opacity! = = undefined? Elem.style.opacity = num / 100: elem.style.filter ='alpha (opacity = '+ num +'}

'); note: the code is set to num/100 because we are based on the standard of IE to FF and GG

compatible function attribute

js is set inside the DOM node transparency: filter= alpha (opacity= + value+) "(ie)

ie filter

opacity=value/100 is in the range of 0~100

(FF and GG).

FF and GG opacity 0~1 (for compatibility with IE filter range, we use num/100

" (two) FadeOut

speed: This is out of function, we set the opacity value from 1 to 0 the number of float value change rate (remember

out of the consideration of compatibility) logic opacity value from 1 to 0 the change of float value.

(function

 package function (let) {fadeFlag = true; function Fade (selector) {this.elem = typeof selector ='Object'? Selector: document.getElementById (selector);} Fade.prototype {constructor: = Fade (setOpacity:, elem, => opacity) {/ / compatible with ie10 - elem.filters ='alpha (opacity = elem.style.filter?' + opacity + ''): elem.style.opacity = opacity / 100; return true; setOpacity: function (Num)}, {this.elem.style.opacity! = = undefined? This.elem.style.opacity = num / 100: this.elem.style.filter ='alpha (opacity = '+ num +' ';}), fadeIn: function (speed, opacity) {/ * speed ==> in speed. Positive integer (optional); opacity ==> fade to the specified. Lightness, 0~100 (optional); * / speed = speed opacity = opacity || || 2; 100; let num = 0; / / initialize the opacity value is 0 if (fadeFlag) {let = setInterval (time (=>); {num + = speed; fadeFlag = false; this.setOpacity (Num); this.elem.style.opacity undefined = =! This.elem.style.opacity? = num / 100: this.elem.style.filter ='alpha (opacity = '+ num +' '); if (Num = > opacity) {clearInterval (time); fadeFlag = true;}};}}, 20), fadeOut: function (speed, opacity) {/ * speed ==> in the speed of positive integer (optional); opacity ==> fade to the specified transparency (optional 0~100 * / speed = speed); || 2; opacity = opacity || 0; let num = 100; / / initialize the opacity value is 0 if (fadeFlag) {let time = setInterval (=> Num) {(- = speed; fadeFlag = false; this.set (Num); this.elem.style.opacity! = = undefined = num / this.elem.style.opacity? 100: this.elem.style.filter ='alpha (opacity = '+ num +' '); if (Num = < opacity) {clearInterval (time); fadeFlag = true;}};}}}, 20); window.Fade = Fade;}) (); test case 

:

 let ('button' BTN = document.getElementsByTagName [0]; let btn2) = document.getElementsByTagName ('button') [1] btn.onclick (=>); =; { Let fade = new Fade ('div1'); (fade.fadeIn);}; btn2.onclick = (=> let) {fade = new Fade ('div1'); fade.fadeOut (}

);

summarized above is small to the native JavaScript package introduce a fade effect the function test code examples, I hope to help you, if you have any questions please give me a message, Xiao Bian will reply you timely. Thank you for your support for the home website of the script!

This paper fixed link:http://www.script-home.com/javascript-native-encapsulation-of-a-function-test-case-code-that-fade-in-and-fade-out.html | Script Home | +Copy Link

Article reprint please specify:JavaScript native encapsulation of a function test case code that fade in and fade out | Script Home

You may also be interested in these articles!