Question

这将是一个javascript函数;使用onclick事件处理程序或其他东西。然后onclick它将淡出框中的id正在使用document.getElementsById（）对象，那么为什么它不会淡出？就像我看到了很多效果吗？另请注意，我正在尝试使用jquery或任何插件来执行此操作，因为我正在尝试学习和掌握JavaScript。

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 for循环而且我是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);

为什么这个脚本不能作为淡出动画效果

3 个答案: