Question

相当简陋的问题。如果我有一个随机数变量从数组中选择一个随机选择，例如“红色”，我希望能够将其存储为当前颜色，同时它在5秒后选择一种新颜色，然后从当前颜色设置动画“红色“以新颜色为例”绿色“因此它会逐渐淡化文档的背景或主体。

我有一些代码，我到目前为止，但我不确定如何得到这个，我知道我必须存储当前的颜色，如果它找到然后找到下一个颜色，但我不知道如何。

    <!doctype html>
<html>
<head>


<meta charset="UTF-8">
<title>Roger</title>
<link rel="stylesheet" href="Roger.css"/>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>

<script src="Roger.js" type="text/javascript"></script>
</head>

<body>

<div class="container">

  <!-- end .container --></div>
</body>

<script>

var Colours = [];
var randCol;
var curCol;

Colours[0] = "red";
Colours[1] = "green";
Colours[2] = "blue";
Colours[3] = "black";
Colours[4] = "grey";

window.setInterval(function(){
 randCol = Math.floor(Math.random() * 5) + 0

alert(randCol);

var nextCol= Colours[randCol];

    if(Colours[randCol] == Colours[0]) {
 document.body.style.backgroundColor="red";
 curCol = "red"; 
    }
    else if(Colours[randCol] == Colours[1]) {
 document.body.style.backgroundColor="green"; 
  curCol = "green"; 

    }
    else if(Colours[randCol] == Colours[2]) {
 document.body.style.backgroundColor="blue";
  curCol = "green"; 

    }
    else if(Colours[randCol] == Colours[3]) {
 document.body.style.backgroundColor="black"; 
  curCol = "black"; 

    }
    else if(Colours[randCol] == Colours[4]) {
 document.body.style.backgroundColor="grey";
  curCol = "grey"; 

    }


}, 5000);



</script>
</html>

Answer 1

我会尝试更像这样的东西

<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>Roger</title>
        <link rel="stylesheet" href="Roger.css" />
        <script src="jquery-1.11.0.min.js" type="text/javascript"></script>
        <script src="Roger.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="container">
            <!-- end .container -->
        </div>
        <script>
            var Colours = [
                "red",
                "green",
                "blue",
                "black",
                "grey"
            ],
                prevCol = null;


            window.setInterval(function () {
                var randCol = Math.floor(Math.random() * Colours.length)
                while (randCol === prevCol) randCol = Math.floor(Math.random() * 5);
                prevCol = randCol;
                document.body.style.backgroundColor = Colours[randCol];
            }, 5000);
        </script>
    </body>
</html>

FIDDLE

要使用jQuery为颜色设置动画，你需要一个插件，这就是你接下来要做的事情吗？

Answer 2

要在没有其他插件的情况下从一种颜色渐变到另一种颜色，您可以将开始背景颜色设置为body，将结束背景颜色设置为.container，然后逐步更改不透明度.container使用setInterval或setTimeout函数从0（透明）到1（可见）。

Jquery在颜色之间制作动画

2 个答案: