本文完整阅读约需 10 分钟，如时间较长请考虑收藏后慢慢阅读~

在网页中应用渐变效果，能够使网页的交互性与美观性得到增强，但是由于JavaScript的一些特点，渐变效果远不止for循环这么简单，不过掌握规律后，其实也并不复杂。这篇博文便来给大家提供一个实现透明度渐变效果的例程以供参考。

在线查看效果

代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>渐变测试</title>
        <style type="text/css">
            #block {
                background-color: #66cccc;
                position: absolute;
                width: 500px;
                height: 500px;
                border-radius: 20px;
                top: 50px;
                opacity: 1;
            }
            h1 {
                text-align: center;
                position: relative;
                color: #FFFFFF;
                top: 200px;
            }

        </style>

        <script type="text/javascript">

            window.onload = function() {
                var mode = "hide";
                document.getElementById("action").onclick = function(){
                    console.log(mode);
                    fadeInOut(mode);
                    if (mode == 'hide') mode = 'show';
                    else mode = 'hide';
                };

            }

            function fadeInOut(mode) {
                var obj = document.getElementById("block");
                var op = parseFloat(window.getComputedStyle(obj).opacity);

                switch (mode) {
                    case 'show':
                        op += 0.1;
                        if (op > 1) return;
                        break;
                    case 'hide':
                        op -= 0.1;
                        if (op < 0) return;
                        break;
                }
                obj.style.setProperty('opacity', op);
                /*JavaScript没有类似于sleep的函数，因此只有靠setTimeout实现*/
                setTimeout("fadeInOut('" + mode + "')", 10);
            }


        </script>
    </head>

    <body>
        <button id="action">显示/隐藏</button>
        <div id="block">
            <h1>
                这是一个div元素
            </h1>
        </div>
    </body>
</html>