JavaScript 渐隐渐显

■知识点

渐隐渐显效果主要通过动态修改元素的透明度来实现。

■实例设计

下面的示例实现一个简单的渐隐渐显动画效果。

//渐隐渐显动画显示函数

//参数：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);                  //调用 setOpacity ()函数

        if(io) {                           //根据渐隐或渐显方式决定执行效果

            i ++ ;

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

        } else{

            i-- ;

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

        }

    }, t);

}

下面调用该函数。

<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>