原生JS實現淡入淡出效果(fadeIn/fadeOut/fadeTo)
阿新 • • 發佈:2019-02-18
淡入淡出效果,在日常專案中經常用到,可惜原生JS沒有類似的方法,而有時小的頁面並不值得引入一個jQuery庫,所以就自己寫了一個,已封裝, 有用得著的朋友, 可以直接使用. 程式碼中另附有一個設定元素透明度的方法, 是按IE規則(0~100)設定, 若改成標準設定方法(0.00~1.00), 下面使用時請考慮浮點精確表達差值.
引數說明:
fadeIn()與fadeOut()均有三個引數,第一個是事件, 必填; 第二個是淡入淡出速度, 正整數, 大小自己權衡, 可選引數; 第三個, 是指定淡入淡出到的透明度值(類似於jQuery中的fadeTo()), 0~100的正整數值, 也是可選引數.
//淡入效果(含淡入到指定透明度) function fadeIn(elem, speed, opacity){ /* * 引數說明 * elem==>需要淡入的元素 * speed==>淡入速度,正整數(可選) * opacity==>淡入到指定的透明度,0~100(可選) */ speed = speed || 20; opacity = opacity || 100; //顯示元素,並將元素值為0透明度(不可見) elem.style.display = 'block'; iBase.SetOpacity(elem, 0); //初始化透明度變化值為0 var val = 0; //迴圈將透明值以5遞增,即淡入效果 (function(){ iBase.SetOpacity(elem, val); val += 5; if (val <= opacity) { setTimeout(arguments.callee, speed) } })(); } //淡出效果(含淡出到指定透明度) function fadeOut(elem, speed, opacity){ /* * 引數說明 * elem==>需要淡入的元素 * speed==>淡入速度,正整數(可選) * opacity==>淡入到指定的透明度,0~100(可選) */ speed = speed || 20; opacity = opacity || 0; //初始化透明度變化值為0 var val = 100; //迴圈將透明值以5遞減,即淡出效果 (function(){ iBase.SetOpacity(elem, val); val -= 5; if (val >= opacity) { setTimeout(arguments.callee, speed); }else if (val < 0) { //元素透明度為0後隱藏元素 elem.style.display = 'none'; } })(); }