Question

我正在尝试在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。

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

非常感谢任何建议。

提前谢谢。

Answer 1

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

卸下：

var y;

Answer 2

确保在test元素可用后运行它。这里工作正常：http://jsfiddle.net/3yDMP/。在这里：http://jsfiddle.net/3yDMP/3/ - 不，因为函数是在head中调用的，而不是onload（就像在小提琴中一样），当dom还没有准备好并且不可用时。

所以，你可以

<head>
  <script>
       function textfade() {...}
  </script>
</head>
<body onload="textfade()">
    <div id="test"> ... </div>

Answer 3

恕我直言这会更好，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/

setTimeout问题

3 个答案: