1

我正在尝试使用更改作为元素传递给函数参数的类的不透明度。它似乎在到达“target.style.opacity = newSetting”时崩溃了我不确定是什么导致了这个问题，因为当我使用 getElementById 时它可以工作。

这是Javascript

var fade_out_from = 10;
function fadeOut(element)
{
    moving = true;
    var target = document.getElementsByClassName(element);
    var newSetting = fade_out_from / 10;
    target.style.opacity = newSetting;
    fade_out_from--;
    if(fade_out_from == 0){
        target.style.opacity = 0;
        target.style.display = "none";
        clearTimeout(loopTimer);
        fade_out_from = 10;
        moving = false;
        return false;
    }
    var loopTimer = setTimeout(fadeOut(element),10);
}
4

2 回答 2

1

document.getElementsByClassName返回一个元素列表（https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName），这target.style.opacity就是未定义的原因。而是尝试使用target[0].style.opacity（除非您实际上需要处理多个找到的元素；在这种情况下，脚本会变得稍微复杂一些）。

但即便如此，脚本也不会因为您使用的方式而淡出元素setTimeout（https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout）。第一个参数应该是一个回调（只是一个函数的名称）。如果要传递参数，则需要将它们添加为第 3、第 4 等参数（在 IE<9 中不起作用）。

因此，您的脚本可能如下所示：

var fade_out_from = 10;
function fadeOut(element)
{
    moving = true;
    var target = document.getElementsByClassName(element);
    var newSetting = fade_out_from / 10;
    target[0].style.opacity = newSetting;
    fade_out_from--;
    if(fade_out_from == 0){
        target[0].style.opacity = 0;
        target[0].style.display = "none";
        clearTimeout(loopTimer);
        fade_out_from = 10;
        moving = false;
        return false;
    }
    var loopTimer = window.setTimeout(fadeOut,10, element);
}
于 2013-10-20T01:00:43.700 回答
0

所以这就是我想出来的，似乎可以解决问题。您只需要添加额外的“target[2].style.opacity = setting”来说明同一类中的其他元素。 

var fade_out_from = 10;
var fadeTimer = setTimeout(function fadeOut(element){
    var target = document.getElementsByClassName(element);
    if(fade_out_from == 0){
        target[0].style.opacity = 0;
        target[1].style.opacity = 0;
        fade_out_from = 10;
        moving = false;
        clearTimeout(fadeTimer);
        return false;
    }
    moving = true;
    var newSetting = fade_out_from / 10;
    target[0].style.opacity = newSetting;
    target[1].style.opacity = newSetting;
    fade_out_from--;
    return true;
},50);
于 2013-10-20T04:30:25.150 回答