JavaScript 漸隱漸顯

■知識點

漸隱漸顯效果主要通過動態(tài)修改元素的透明度來實現(xiàn)。

■實例設計

下面的示例實現(xiàn)一個簡單的漸隱漸顯動畫效果。

//漸隱漸顯動畫顯示函數(shù)

//參數(shù)：e表示元素，t表示速度，值越大速度越慢

//io表示顯方式，true表示漸顯，false表示漸隱

function fade (e, t, io) {

    var t = t || 10;                       //初始化漸隱漸顯速度

    if(io){var i = 0;}                     //初始化漸隱漸顯方式

    else{var i = 100; }

    var out = setlnterval(function(){      //設計定時器

        setOpacity(e, i);                  //調(diào)用 setOpacity ()函數(shù)

        if(io) {                           //根據(jù)漸隱或漸顯方式?jīng)Q定執(zhí)行效果

            i ++ ;

            if(i >= 100) clearTimeout(out);

        } else{

            i-- ;

            if(i <= 0) clearTimeout (out);

        }

    }, t);

}

下面調(diào)用該函數(shù)。

<style type="text/css">

.block {width:200px; height:200px; background-color:red; }

</style>

<div class="block" id="blockl"></div>

<script>

e = document.getElementByld('blockl');

fade (e, 50, true) ;                   //應用漸隱漸顯動畫效果

</script>