How to change contents of bootstrap div slowly

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>

Take a look [jQuery animate backgroundColor](http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor) — Ivnhal, Sep 28 '16 at 20:09

score 1 · Accepted Answer · answered Sep 28 '16 at 20:17

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>

Thank you Ihor, I used your suggestion and it gives me what I wanted. — 300, Sep 28 '16 at 20:57

score 1 · Answer 2 · answered Sep 28 '16 at 20:19

1

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

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

answered Sep 28 '16 at 20:19

How to change contents of bootstrap div slowly

2 Answers2