1

我正在尝试在 Javascript 中创建 jquery fadeto 类型的效果，但我的 setTimeout 命令有问题。

这是代码：

function textfade(y) {
    var x = document.getElementById("test");
    var y;           
    if (y == undefined) {
        y = 1.0;
    } 

    x.style.opacity = y;
    y -=0.1;
    setTimeout(function(){ textfade(y); }, 50);
}

问题是x.style.opacity = y。

没有它，超时运行正常。然而，有了它，它会运行一次函数然后死掉。虽然我觉得这是一个简单的错误，但我没有修复它的想法。

任何建议将不胜感激。

先感谢您。

4

3 回答 3

2

y您每次执行时都重新声明textfade()，有效地销毁/重置传递的参数。

消除：

var y;
于 2012-12-04T10:29:39.710 回答
1

确保在test元素已经可用后运行它。在这里它工作正常：http: //jsfiddle.net/3yDMP/。在这里：http://jsfiddle.net/3yDMP/3/ - 不，因为当 dom 尚未准备好且不可用时，函数是在 head 中调用的，而不是在 onload 中（如在第一个小提琴中）。

所以，在你可能是

<head>
  <script>
       function textfade() {...}
  </script>
</head>
<body onload="textfade()">
    <div id="test"> ... </div>
于 2012-12-04T10:36:08.590 回答
0

恕我直言，调用内部闭包会更好，setTimeout其中当前不透明度级别保持在淡入淡出函数本身之外，因此您不必传递它。

function textfade(el) {
    if (typeof el === "string") {
        el = document.getElementById(el);
    }

    var opacity = 1.0;

    (function fade() {
        el.style.opacity = opacity;
        opacity -= 0.1;
        if (opacity > 0) {
             setTimeout(fade, 50);
        }
    })();
}

演示在http://jsfiddle.net/alnitak/TQHYj/

于 2012-12-04T10:29:34.890 回答