Question

我正在尝试学习Javascript动画，但正如我所想，它不适用于xD。

更新删除过失的错误

我试过

function click_home()
{
    for(i=0;i<=10;i++)
    {
       setTimeout(setOpacity("div_home",i),200);
    }
};

function setOpacity(id,value) {
    document.getElementById(id).style.opacity = value/10;
    document.getElementById(id).style.filter = 'alpha(opacity=' + value*10 + ')';
};

和HTML：

<td id="button_home" onclick="click_home();"> Home </td>

但显然是错的。我该怎么办？:) 感谢所有回复：）

Answer 1

首先，您在for循环中遇到语法错误（将,更改为;）。

您需要将函数传递给setTimeout，以便它可以定期执行。您当前传递的内容setTimeout是执行setOpacity("div_home",i)的结果（即undefined）。

function click_home()
{
    for(i=0;i<=10;i++)
    {
       setTimeout(function () {
           setOpacity("div_home",i)
       }, 200);
    }
};

您还会发现，i的值总是最终成为最后一个值，因为i的范围，要解决此问题，您需要添加新的范围级别。有关此问题的更详细说明，请参阅How to reference right value of `i` in a callback in a loop?

function click_home()
{
    function delay(i) {
        setTimeout(function () {
           setOpacity("div_home",i)
        }, 200);
    }

    for(i=0;i<=10;i++)
    {
       delay(i);
    }
};

如评论中所述，您会发现所有超时将在200ms后执行..以获取动画，您需要错开执行。最简单的方法是将i添加到延迟计算中;即25 * i。

我不确定为什么你在{{opacity和filter到0 首先 1}}功能;这些重置将立即设置为后面的值。

您还应该查看缓存setOpacity的结果，因为您要查找4次（如果删除上述不需要的重置，则会为2）。

document.getElementById(id).style

Javascript动画等级：初学者

1 个答案: