javascript - Jquery Animating between colours -
fairly rudimentary question. if have random number variable picks random selection out of array example "red" want able store current color whilst picks new colour after 5 seconds , animate current colour "red" new colours example "green" fades background or body of document 1 other.
i have code have written far unsure how this, know have store current color if found find next color 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>
i'd try more
<!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>
to animate colors jquery you'll need plugin, that's you're going next ?
Comments
Post a Comment