Question

有谁知道为什么我的代码不起作用？我想慢慢改变div的颜色。

function fadein() {
    change = document.getElementsByClassName("load_1")[0]
    setInterval(function(){
        change.style.color = "rgb("+x+","+x+","+x+")";
        x=x+1
    }, 200)
};

function animate(){
    var x=0;
    fadein()
};

animate()

Answer 1

尝试像这样传递x

function fadein(x) {
    var change = document.getElementsByClassName("load_1")[0];
    setInterval(function(){
        change.style.color = "rgb("+x+","+x+","+x+")";
        x=x+1;
    }, 200);
};

function animate(){
    var x=0;
    fadein(x);
};

animate();

Answer 2

你可以这样做

<html>
<head>
<meta charset="utf8"/>
<script type="text/javascript">
function changecolor() {
 document.getElementById("color").style.cssText = "background:#008000; -moz-transition:all 1s; -webkit-transition:all 1s; -o-transition:all 1s; transition:all 1s;";
}
</script>

</head>
<body>
<style>
#color {width:150px; height:150px; background:#f00;}
</style>
<div id="color"></div>
<input type="button" onclick="changecolor()" value="Change color"/>
</body>
</html

只需根据您的选择更改 -moz-transition：all 1s; 。

Answer 3

如果你真的坚持使用javascript，这是一种可以实现的方法。有更优雅的方式，但这一个将工作。您还可以使用CSS过渡或jQuery动画。

var x = 0;

function fadein() {
    var change = document.getElementsByClassName("load_1")[0];
    setInterval(function(){
        change.style.color = "rgb("+x+","+x+","+x+")";
        x++;
        if(x < 256)
            fadein();
    }, 200);
};

function animate(){
    x=0;
    fadein();
};

animate();

Answer 4

实现这一目标的最小步骤是：

在函数

x

传入目标颜色值以终止操作。在这种情况下，您需要清除间隔 - 否则RGB将永远持续。

这是一个例子：

var x;
function fadein(target) {
    x=0;
    var change = document.getElementsByClassName("load_1")[0]
    var interval = setInterval(function(){
        console.log("rgb("+x+","+x+","+x+")")
        change.style.color = "rgb("+x+","+x+","+x+")";
        x=x+1;
        if (x > target) clearInterval(interval);
    }, 100)
};

function animate() {
    fadein(255);
};

animate();

<div class="load_1">Hello World</div>

我希望有所帮助！

Answer 5

这看起来最适合使用CSS。

.colorchange {
  animation: blacktowhite;
  animation-duration: 3s;
}
@keyframes blacktowhite {
  from {color: rgb(0,0,0);}
  to {color: rgb(255,255,255);}
}

https://jsfiddle.net/7tzeynd0/

Answer 6

由于这是关于动画的第二个问题，请看一下这个相当通用的解决方案：

使用requestAnimationFrame()制作动画
使用（已提供）时间戳

＆＃13;

function fade(duration, callback) {
  let start = performance.now();
  let step = (now) => {
    let delta = (now - start) / duration;
    if (delta < 1) {
      callback(delta);
      requestAnimationFrame(step);
    }
  }
  requestAnimationFrame(step);
}

let loading = document.getElementById("loading");

fade(1000, (delta) => {
    let color = 255 * delta | 0;
    loading.style.color = `rgb(${color},${color},${color})`;
});

＆＃13;

<div id="loading">LOADING</div>

＆＃13;

我的代码出了什么问题？慢慢地将颜色改变为div

6 个答案: