Question

我对Javascript很新，并且一直试图在网站上实现一些淡化效果。我已经成功地将我想要的效果集中在一起，并且所有功能都在Firefox＆amp;苹果浏览器。但IE不喜欢它。第一个更改背景颜色的脚本可以正常工作，但第二个淡入内容的脚本什么也不做。

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

window.onload=siteIntro;

这里没有工作的Javacript。任何帮助或建议将不胜感激，如果需要，可以查看live site。

非常感谢

// ################# 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 here。

另一件事，而不是：

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为您执行此操作。一行或两行代码，与浏览器兼容。

淡入淡出的脚本在IE中不起作用？

3 个答案: