Change css background to a random background with jquery with animation

Question

So I have a random quote generator and every time the user clicks New Quote button, the background of body and mainDiv that contains the quote changes. I want a animation to take place, i want it so that it fades out and the new background fades in over 100ms. i did some reading but my case is different since my background is randomly choosen from an array with math.random. here's my code.

<body>
  <div id="mainDiv" class="colorChange">
    <button id="newQuote" class="btn btn-danger">New Quote</button>
    <div id="targetP"></div>
  </div>
</body>

var divBackground, bodyBackground,quoteButton,targetP,number,sec;
    targetP=$("#targetP").val();
    $("#newQuote").click(function () {
    number=Math.floor((Math.random() * 10) + 1);
    sec=Math.floor((Math.random() * 10) + 1);
    $("#mainDiv").css("background-color",colors[number]);
    $("body").css("background-color",colors[sec]);
    $("#targetP").html(quotes[number]);
});

how do i animate change of background color (body and main div) so the previous background fades out in 100ms and new one comes in at 100ms? thanks

edonbajrami · Accepted Answer · 2016-09-11 17:07:46Z

1

You can add transition in css to the "#mainDiv" and "body" to change background color and fade out and in the "targtP" div.

answered Sep 11, 2016 at 17:07

edonbajrami

2,21625 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

eclipseIzHere Over a year ago

the next color is selected randomly from an array and stored in an variable. how do i put the next color in css transition?

edonbajrami Over a year ago

Just give to the folowing divs "#mainDiv" and "body" a transition code: body, #mainDiv { -webkit-transition: background-color .3s ease-in; -moz-transition: background-color .3s ease-in; -ms-transition: background-color .3s ease-in; transition: background-color .3s ease-in; }

eclipseIzHere Over a year ago

yay it works, but i still don't really understand exactly how css can tell from what the next background is

edonbajrami Over a year ago

It doesn't tell, but just allow property to changes smoothly. In this case you are changing background-color property.

user6280245 · Accepted Answer · 2016-09-11 17:41:52Z

I don't see any colors there. Basically what I did is created an array with colors (of course put your 10 colors) and then i tell to the function which color from the array to choose. Why 10? it's maximum number that can be in numbers and seconds. I wrote these as a child for easy understanding and reading. Hope it was helpful.

<script>
  var divBackground, bodyBackground, quoteButton, targetP, number, sec;
var colors = ["red","green","blue","black","navy","pink","red","silver","blue","black","silver","pink"];
function myFunction(){
  number = Math.floor((Math.random() * 10) + 1);
  sec = Math.floor((Math.random() * 10) + 1);
  document.getElementById('mainDiv').style.backgroundColor =  colors[number];
  document.getElementById("body").style.backgroundColor =  colors[sec];
};
</script>

<style>
body{
  transition: 1s;
}
#mainDiv{
  width: 200px;
  height: 200px;
  transition: 1s;
}
</style>

</head>
  <body id="body">
    <div id="mainDiv" class="colorChange">
      <button id="newQuote" class="btn btn-danger" onclick="myFunction()">New Quote</button>
      <div id="targetP"></div>
    </div>

Collectives™ on Stack Overflow

Change css background to a random background with jquery with animation

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related