Question

长话短说，为什么这不起作用？它似乎运行了一次setTimeout行，但它不会重复。它应该每隔500毫秒将目标元素的背景颜色的alpha减少0.1，直到它达到零，但是通过我的计算，它只会在函数停止之前使其达到0.9 ...它＆＃39;非常简单，但我无法在这里或其他地方找到任何类似这样的信息。

编辑：感谢您的回答，让它与setInterval一起使用。 CSS绝对提供了一个更优雅的解决方案，但我应该提到这是一个我们应该使用javascript的赋值。

function highlight(which){
    var target=document.getElementById(which);
    var a_value=1.0;
    if(a_value<0){
      return;
    }
    target.style.backgroundColor="rgba(255,255,0,"+a_value+")";
    setTimeout(function(){target.style.backgroundColor="rgba(255,255,0,"+(a_value -= 0.1)+")";}, 500);
  }

Answer 1

setTimeout只会发射一次。如果您希望某个时间段内不断重复某些内容，则应调用setInterval。但是，您应该记住在动画结束时取消此重复计时器。

当你致电setInterval时，它会返回一个基本上是你的计时器句柄的数字。然后，您可以通过将此号码传递给clearInterval()来取消计时器。

这是一个修订过的功能：

function highlight(which)
{
    var target = document.getElementById(which);
    var a_value = 1.0;

    target.style.backgroundColor = "rgba(255,255,0," + a_value + ")";

    let handle = setInterval(function ()
    {
        if (a_value < 0)
        {
            clearInterval(handle);
            return;
        }

        target.style.backgroundColor = "rgba(255,255,0," + (a_value -= 0.1) + ")";
    }, 500);
}

然而，关于这个问题的评论是正确的，指出用JavaScript再做这种类型的动画真的没有意义。你应该研究CSS transitions。

Answer 2

如果您要求定期运行相同的代码，请阅读setInterval，clearInterval或制作方法并通过传递期间再次调用函数内的setTimeout。< / p>

但是如果你问的是如何设置动画的动画，那么 - 使用css动画，不要重新发明轮子＆＃34; （：

＆＃13;

function fadeIn(which){
    document.getElementById(which).classList.add("fadeIn");
}

fadeIn('fadeitin');


function fadeOut(which){
    document.getElementById(which).classList.add("fadeOut");
}

fadeOut('fadeitout');

＆＃13;

#fadeitin {
  position: absolute;
  left: 0; top: 0;
  width: 200px;
  height: 200px;
  background: #f00;
  opacity: 0;
}

#fadeitout {
  position: absolute;
  right: 0; top: 0;
  width: 200px;
  height: 200px;
  background: #00f;
  opacity: 1;
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

＆＃13;

<div id="fadeitin"></div>

<div id="fadeitout"></div>

＆＃13;

P.S。您可以使用jQuery和fadeIn，fadeOut方法。

Answer 3

如上所述，setTimeout()仅计算时间并触发一次回调函数。但是，您可以通过递归函数调用使其运行多次。由于两者之间的性能差异，这有时优于setInterval()。

＆＃13;

var a_value = 1.0;  // Needs to be outside of function to only be used once

function highlight(which){

    if(a_value < 0){ return; }

    // Instead of changing only the alpha of an RGB, just change the opacity
    which.style.opacity = (a_value -= 0.1);
    
    setTimeout(function(){
      highlight(which); // recursive call
    }, 500);
}

highlight(document.getElementById("test"));

＆＃13;

#test {
  height:100px;
  background-color:yellow;
}

＆＃13;

<div id="test"></div>

＆＃13;

但实际上，这可以通过CSS动画而不是JavaScript来完成：

＆＃13;

#test {
  height:100px;
  background-color:yellow;
  animation-name: fade;
  animation-duration: 3s;
  animation-iteration-count: 1;
}

@keyframes fade {
  from { opacity:1; }
  to   { opacity:0  }
}

＆＃13;

<div id="test"></div>

＆＃13;

使用setTimeout淡化颜色

3 个答案: