300 300 - 2 months ago 7
Javascript Question

How to change contents of bootstrap div slowly

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

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>