褪色脚本在IE中无法正常工作？

Question

我对Java语言还很陌生，并且一直在尝试在网站上实现一些褪色效果。 我设法拼凑出想要的效果，并且在Firefox和Safari上一切正常。 但是IE不喜欢它。 第一个更改背景颜色的脚本有效，但是第二个淡入内容的脚本则无济于事。

我从头开始调用脚本，如下所示：

window.onload=siteIntro;

这里不起作用的Javacript。 任何帮助或建议，将不胜感激，可以在需要时查看实时站点 。

非常感谢

// ################# Fade Divs ###############################

function Fade(objID,CurrentAlpha,TargetAlpha,steps){

    var obj = document.getElementById(objID);

    CurrentAlpha = parseInt(CurrentAlpha);
    if (isNaN(CurrentAlpha)){
        CurrentAlpha = parseInt(obj.style.opacity*100);
        if (isNaN(CurrentAlpha))CurrentAlpha=100;
    }
    var DeltaAlpha=parseInt((CurrentAlpha-TargetAlpha)/steps);
    var NewAlpha = CurrentAlpha - DeltaAlpha;

    if (NewAlpha == 100 && (navigator.userAgent.indexOf('Gecko') != -1 && navigator.userAgent.indexOf('Safari') == -1)) NewAlpha = 99.99;

    obj.style.opacity = (NewAlpha / 100);
    obj.style.MozOpacity = obj.style.opacity;
    obj.style.KhtmlOpacity = obj.style.opacity;
    obj.style.filter = 'alpha(opacity='+NewAlpha+')';

    if (steps>1){
        setTimeout('Fade("'+objID+'",'+NewAlpha+','+TargetAlpha+','+(steps-1)+')', 50);
    }
}

// ################# Toggle content div visibility ###############################
function mainVis(showMain) {
    document.getElementById(showMain).style.visibility ="visible";
}

function pageSwitch(show0, hide0, hide1, hide2, hide3) {
    document.getElementById(show0).style.visibility ="visible";
    document.getElementById(hide0).style.visibility ="hidden";
    document.getElementById(hide1).style.visibility ="hidden";
    document.getElementById(hide2).style.visibility ="hidden";
    document.getElementById(hide3).style.visibility ="hidden";
}

function pg1() {
    pageSwitch('prices', 'icon', 'about', 'map', 'news');
    Fade('prices','0',100,30)
}
function pg2() {
    pageSwitch('about', 'icon', 'prices', 'map', 'news');
    Fade('about','0',100,30)
}
function pg3() {
    pageSwitch('map', 'icon', 'about', 'prices', 'news');
    Fade('map','0',100,30)
}
function pg4() {
    pageSwitch('news', 'icon', 'map', 'about', 'prices');
    Fade('news','0',100,30)
}

// ################# Site Intro Functions ###############################

function siteIntro() {
    setTimeout("NLBfadeBg('b1','#FFFFFF','#000000','3000')",2000);
    mainVis('main');
    setTimeout("Fade('main','',100,30)",5000);
}

Answer 1

MS过滤器仅适用于“具有布局”的元素。

要强制布局，可以给元素一个width或height ，或者使用旧的zoom: 1; 特技。

不知道这是否是造成问题的原因，但是您可以尝试一下。

您可以在此处阅读更多有关hasLayout 信息 。

另一件事，而不是：

setTimeout('Fade("'+objID+'",'+NewAlpha+','+TargetAlpha+','+(steps-1)+')', 50)` 

您可以简单地写：

setTimeout(function() { Fade(objID, NewAlpha, TargetAlpha, steps-1); }, 50)`

除非您只是为了娱乐和/或学习而做，否则请使用现有的JS库而不是重新发明轮子。

Answer 2

也许您可以利用现成的跨浏览器脚本，例如http://brainerror.net/scripts/javascript/blendtrans/

或使用jQuery（非常适合动画和效果）或任何其他JS库

Answer 3

这可能不是您要找的答案，但您不应该这样做：您可以使用jQuery为您完成此任务。 一两行代码，并且与跨浏览器兼容。