div淡出淡入的方法原理 

function click2() {
            var o = document.getElementById("div");
            //在IE中 filters属性控制元素的透明度(类似数组的对象). 原div没有设置透明度.那么o.filters的length为0
            if (o.filters) {
                o.style.filter = 'alpha(opacity=' + 0 + ')';
                //设置了filter样式的值(注意 是 style.filter)后,filters属性的length变成1
                //于是就可以用obj.filters[0].opacity来访问了
            }
            else
                o.style.opacity = 0; o.style.display = "";
            ShowOrHide(o, 100, 0, function() { alert('回调'); });
        }
        function ShowOrHide(obj, start, end, callback) {            //四个参数,第一个为对象,2为起始，3为目标,4为回调函数            //当起始>目标，则显示，反之则隐藏
            if (obj.filters) {
                obj.filters[0].opacity = start;
            }
            else
                obj.style.opacity = start * 0.01;
            if (start != end) {
                if (start < end)
                    start += 10;
                else
                    start -= 10;
                setTimeout(
                    function() {
                        ShowOrHide(obj, start, end, callback)
                        },100);
            }
            else
                arguments[3].call(null);
        }

<body>
    <input type="button" id="btn" onclick="click2()" value="222" /><div style="display: none;
        width: 200px; height: 200px; background-color: Red" id="div">
    </div>
</body
posted @ 2010-06-29 00:23  MyCoolDog  阅读(491)  评论(0)  编辑  收藏  举报