首页 > 解决方案 > 在 IE7、IE8 中使用滤镜淡化

问题描述

我有以下淡入代码,可在 IE 9、10 和其他现代浏览器中使用,以便在<select>元素动态添加到页面时淡入该元素:

function fadeIn(element) {        
    var op = 0.1;
    var timer = setInterval(function() {
        if (op >=1 ) {
            clearInterval(timer);
        }
        element.style.opacity = op;
        op += 0.1;
    }, 50);
}

我需要在 IE 7 和 IE 8 中进行类似的淡入淡出工作。上面的代码不起作用,因为那些旧版浏览器使用filterstyle 属性。所以我试图实现这一点,但我找不到好的文档。使用这个文档,以下是我的尝试,使用一个只有一个 body 标签的空 HTML 页面:

JS:

window.onload = function() {
    var body = document.body;
    var select = document.createElement("select");
    var option = document.createElement("option");
    var optionText = document.createTextNode("A random choice.");
    body.appendChild(select);
    option.appendChild(optionText);
    select.appendChild(option);
    fadeInIE(select);

    function fadeInIE(element) {
        element.style.filter ="progid:DXImageTransform.Microsoft.Fade(duration=5)";
        element.filters[0].Apply();
        element.filters[0].Play();
    }
}

其他 CSS:

select {
    display: block;
    margin:0 auto;
    margin-bottom: 30px;
    width:150px;
}

它不起作用。我应该如何实现filter以实现类似的淡入效果?

标签: javascriptcssinternet-exploreropacityfade

解决方案


推荐阅读