Question

var d = document.getElementById("box");

function fadeOut(r, s) {
    if (!this instanceof Element) return false;
    this.style.opacity = ".90";
    var opacity = this.style.opacity;
    var t = setInterval(function() {
        if (!r) r = 500;
        opacity = (opacity) - s;
        if (opacity == ".0") return;
    }, r);
};

fadeOut.apply(d, [100, 5]);

它不起作用。出了什么问题？

Answer 1

我知道这不是你想要的答案，但如果你在项目中实际使用它，那么有几点需要注意：

您只是动画不透明 - 请记住IE＆lt; 9不支持此属性。
支持不透明度的所有当前浏览器也支持转换（Firefox 3.X是例外，但现在不会出现问题4）。

所以，一个更干净的方法，可以在你所有的当前浏览器中使用，将使用CSS来设置

-webkit-transition:opacity 0.6s ease-in-out;
-moz-transition:opacity 0.6s ease-in-out;
-o-transition:opacity 0.6s ease-in-out;
-ms-transition:opacity 0.6s ease-in-out;
transition:opacity 0.6s ease-in-out;

然后在你的JS中，只需使用

更改不透明度

this.style.opacity = ".90";

它将根据需要设置动画，并且作为一个相当大的奖励，它在某些浏览器（目前是iOS）中加速了硬件。

Answer 2

当你走到这一行时：

var opacity = this.style.opacity;

opacity是字符串".90" 而不是对元素opacity属性的style属性的引用。

从函数返回不会取消间隔，您需要clearInterval。

function fadeOut(r, s) {
    var self = this;
    if (!self instanceof Element) return false;
    self.style.opacity = ".90";
    var t = setInterval(function() {
        if (!r) r = 500;
        self.style.opacity = self.style.opacity - s;
        if (self.style.opacity == ".0") {
            clearInterval(t);    
        }
    }, r);
};

此外，完全不透明度为1且无均为0.每次s减少s，5定义为.9。由于你开始下降到fadeOut.apply(d, [100, .1]);，你可能意味着：

{{1}}

Answer 3

你的不透明度从0.9开始。然后在每个间隔中从中减去5。这意味着第一次间隔运行时，您将尝试将不透明度设置为字符串“-4.1”，这将无法解析为有效的不透明度值，因此将忽略该集合。然后你绕圈子走了一圈。你的意思是0.05而不是5？或者回调函数中的s / 100？

Answer 4

var d = document.getElementById("box");

function fadeOut(r, s) {
    if (!this instanceof Element) return false;
    this.style.opacity = ".90";
    var opacity = this.style.opacity;
    var t = setInterval(function() {
        if (!r) r = 500;
        opacity = (opacity) - s;
        if (opacity == ".0") return;
    }, r); };

fadeOut.apply(d, [100, 5]);

此代码存在许多问题。

首先，CSS属性是字符串，因此您的不透明度添加行应为：

opacity = parseInt(opacity) - 0.05 + '';

不透明度变为int，然后加上负0.05，然后使用+ ''

将其转换回字符串

其次，if (!r) r = 500;应该在匿名函数之外定义。

你应该：

var d = document.getElementById("box");

function fadeOut(fadeScaler, hertz) {
    if (!this instanceof Element) return false;
    hertz = (!hertz) ? 60 : hertz; // Approx 60 hertz refresh rate

    var opacity = this.style.opacity
        opacity = ".9";

    var t = setInterval(
       function() {
         opacity = parseInt(opacity) - fadeScaler + '';

         if (parseInt(opacity) <= 0) 
           clearInterval(t);
       },
       Math.floor(1000 / hertz)); // 1000 miliseconds / hertz = refresh rate
};

fadeOut.apply(d, [.05]);

更加注意代码的易读性和风格。优雅的编码器是一个聪明的编码器。

此外，在IE中，不透明度相当于以下内容：

this.filters.alpha.opacity=100

它从0到100。

为什么JavaScript中的这个fadeOut函数失败了？

4 个答案: