淡入淡出js 原生實現以及css 實現方法

淡入淡出效果

js原生實現

js封裝fadeIn(),fadeOut()函數的實現

• fadeIn()
  

  將需要淡入的元素在css樣式中添加display:none。之後進行js操作：通過ele.style.display = 'block'設置顯示元素，並將該元素的透明度改爲0;之後進行封裝函數。

    (function () {
            ele.style.opacity = opa;
            opa = opa +10;
            if(opa <= opacity){
                setTimeout(arguments.callee,speed);
            }
        })();

通過arguments.callee實現遞歸。使得透明度以10爲基數增加。

• fadeOut()

在js中將需要淡出的元素的style的display更改屬性爲none.設置隱藏。並不斷的將透明度改爲0.原理和淡入一樣。

源碼地址：https://github.com/special-wen/demo/tree/master/demo_fadeInOut/js%E5%8E%9F%E7%94%9F

css實現

實現鼠標移入時淡入鼠標移除時淡出

• transition

利用css3新增的屬性transition實現。

#demo li{
    list-style: none;
    font-size: 18px;
    color: #8fa1c7;
    transition: opacity 2s;
    opacity: 0;
}

#demo li:hover{
    opacity: 1;
    transition-duration: 0s;
}

transition:opacity 2s表示爲改變屬性opacity:0一共2s。當鼠標移入時，將透明度更改爲1

源碼地址：https://github.com/special-wen/demo/tree/master/demo_fadeInOut/css%E5%AE%9E%E7%8E%B0