如何缓慢更改Bootstrap div的内容

Question

I have a html page that change some content on a button click (I am using onClick). I have it working fine.

Now I want to try to add some effect to it so that when button is clicked, the text, background color, etc should change slowly (in 3-5 seconds). It think in bootstrap it's called fade effect.

Can I achieve this by modifying my existing code here:

 function myFunction() { document.getElementById("idQuote").innerHTML = 'It is better to play than do nothing.'; document.getElementById("idQuoteBy").innerHTML = '- Confucius (Philosopher, 551 BC-479 BC)'; document.body.style.background = '#ffc0cb'; document.getElementById("my-content").style.backgroundColor = '#db7093'; document.body.style.color = 'pink'; } 

  body { background-color: #fff8dc; font: Verdana, Helvetica, sans-serif; color: maroon; } #my-content { background-color: #ffdead; margin: 200px 50px 100px 50px; border-radius: 10px; } .quote { margin: 0px 50px 0px 50px; text-align: center; } .quoteBy { margin: 0px 25px 0px 0px; text-align: right; } .buttonLine { margin: 50px 0px 0px 0px; } #newQuoteButton { display: inline-block; vertical-align: top; margin: 0px 0px 50px 450px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div id="my-content"> <br /><br /><h1 class="quote" id="idQuote">Quick Brown Fox Jumped Over The Lazy Dog! Quick Brown Fox Jumped Over The Lazy Dog!</h1> <br /><h4 class="quoteBy" id="idQuoteBy">....The Quick Fox</h4> <div class="buttonLine"> <button type="button" id="newQuoteButton" class="btn btn-primary btn-sm" onclick="myFunction()">New Quote</button> </div> </div> <footer> <p class="text-center">Compiled by: Someones Name</p> </footer> </div> 

Answer 1

Just add some transition property to body. See below in my example. I hope it will help you.

 function myFunction() { document.getElementById("idQuote").innerHTML = 'It is better to play than do nothing.'; document.getElementById("idQuoteBy").innerHTML = '- Confucius (Philosopher, 551 BC-479 BC)'; document.body.style.background = '#ffc0cb'; document.getElementById("my-content").style.backgroundColor = '#db7093'; document.body.style.color = 'pink'; } 

  body { transition: all 1.5s ease-in-out; // ADD SOME TRANSITION background-color: #fff8dc; font: Verdana, Helvetica, sans-serif; color: maroon; } #my-content { background-color: #ffdead; margin: 200px 50px 100px 50px; border-radius: 10px; } .quote { margin: 0px 50px 0px 50px; text-align: center; } .quoteBy { margin: 0px 25px 0px 0px; text-align: right; } .buttonLine { margin: 50px 0px 0px 0px; } #newQuoteButton { display: inline-block; vertical-align: top; margin: 0px 0px 50px 450px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div id="my-content"> <br /><br /><h1 class="quote" id="idQuote">Quick Brown Fox Jumped Over The Lazy Dog! Quick Brown Fox Jumped Over The Lazy Dog!</h1> <br /><h4 class="quoteBy" id="idQuoteBy">....The Quick Fox</h4> <div class="buttonLine"> <button type="button" id="newQuoteButton" class="btn btn-primary btn-sm" onclick="myFunction()">New Quote</button> </div> </div> <footer> <p class="text-center">Compiled by: Someones Name</p> </footer> </div> 

Answer 2

Use transition property in body, my-content, idQuote, idQuoteBy like

 -webkit-transition-duration: all 5s;
  transition-duration: all 5s;