为什么此脚本不能用作淡出动画效果

Question

这将在javascript函数中； 与onclick事件处理程序之类的东西。 然后onclick会淡出box的id使用document.getElementsById（）对象，所以为什么不淡出呢？ 就像我看过很多效果一样吗？ 另请注意，在尝试学习和掌握javascript时，我尝试不使用jquery或任何插件来执行此操作。

setTimeout(function() {
        for(var i = 1; i< 9; i++) {
            setTimeout(function() {
            box.style.opacity = '0.'+i; 
            }, 100);
        }
        }, 1000);

Answer 1

您应该递归调用该函数，如下所示：

    var box = document.getElementById('box');
    var i = 10;
    function fadeOut() {
        if (i>0) {
            i--;
            box.style.opacity = '0.'+i; 
            setTimeout(fadeOut, 100);
        }
    }
    setTimeout(fadeOut, 1000);

Answer 2

一些东西：

1）您实际上是通过增加不透明度来淡入盒子，而不是通过减少不透明度来淡入盒子。

2）您要同时设置所有setTimeout函数，在内部调用中，您可能想调用setInterval并使该增量为i。 或者，您可以通过将时间设置为100 * i而不是100来堆积setTimeouts。

Answer 3

您的问题尚不清楚，但可能会立即以0.9的不透明度看到它。 原因是for循环实际上并未为您提供循环内i的值，而只是为您提供了访问它的地址。 如果您实际上在for循环的主体内使用它，那很好，但是您没有这样做。 设置超时时，到调用超时时，它已经完成了for循环的迭代，并且i为9。因此，每个超时仅会将不透明度设置为0.9。

要解决此问题，您可以将其包装在自动执行的匿名函数中，该函数传入i的值。 这样做将导致匿名函数的作用域为i，并允许其在调用时被超时访问。

setTimeout(function() {
    for (var i = 1; i < 9; i++) (function(i) {
        setTimeout(function() {
            box.style.opacity = '0.' + i;
        }, 100);
    }(i) // (i) at the end automatically executes, with the argument of i
}, 1000);