Javascript动画级别：初学者

-1

我正在尝试学习Javascript动画，但是，正如我想的那样，它不起作用xD。Javascript动画级别：初学者

修订DELETING糊化MISTAKES

我试图

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>

但显然是错误的。我能做些什么来做到这一点？:) 感谢所有答复:)

来源

2012-02-14 Bonny1992

我写了“大家好：d”为开头的xD – Bonny1992 2012-02-14 14:02:54

你需要告诉我们_why_这是错的;什么是不做你想做的事，它目前展现了什么样的行为？ – Bojangles 2012-02-14 14:04:57

而不是div_home我认为它应该是button_home – Pranav 2012-02-14 14:05:49

首先，你得在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第一在setOpacity功能;这些重置将立即被设置为以下值。

你也应该看看缓存document.getElementById(id).style的结果，因为你正在查找它4次（如果你删除上面描述的不需要的重置，将会是2）。

function setOpacity(id,value) { 
    var style = document.getElementById(id).style; 

    style.opacity = value/10; 
    style.filter = 'alpha(opacity=' + value*10 + ')'; 
};

来源

2012-02-14 14:04:44 Matt

由于所有更改都将在200 ms后发生，因此不会出现任何情况，而是立即进行不透明跳转。更改200到我* 20 – Dave 2012-02-14 14:12:14

不，这一个不适合我... 我认为这是';'在'setOpacity（“div_home”，i）'中忘记了，但是没有。非常感谢，无论如何:) – Bonny1992 2012-02-14 14:14:01

@Dave：注意。更新。 – Matt 2012-02-14 14:14:27

Javascript动画级别：初学者

回答

相关问题