CODEWITHSUNDEEP
javascriptjqueryhtml
Mr Dansk
Mr Dansk

Reputation: 786

Jquery Animating between colours

Fairly rudimentary question. If I have a random number variable which picks a random selection out of an array for example "red" I want to be able to store that as the current color whilst it picks a new colour after 5 seconds and then animate from the current colour "red" to the new colours for example "green" so it fades the background or body of the document slowly from one to the other.

I have some code that I have written so far but I am unsure how I would get this, I know I would have to store the current color if it was found then find the next color but Im not sure how.

    <!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>

Upvotes: 0

Views: 89

Answers (2)

Aidas Bendoraitis
Aidas Bendoraitis

Reputation: 4003

To do the fading from one color to the other without additional plugins, you could set the start background color to the body, the end background color to the .container and then incrementally change the opacity of the .container from 0 (transparent) to 1 (visible) using setInterval or setTimeout function.

Upvotes: 0

adeneo
adeneo

Reputation: 318372

I'd try something more like this 

<!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

To animate colors with jQuery you'll need a plugin, it that's what you're going to next ?

Upvotes: 1

Related Questions