James James - 2 months ago 10x
HTML Question

JavaScript make AJAX content fade in

How would I make the content fade into the div with the id viewRoul every time the script runs to load new content?

function list_roul(){
var hr = new XMLHttpRequest();
hr.onreadystatechange = function(){
if (hr.readyState==4 && hr.status==200){
document.getElementById("viewRoul").innerHTML = hr.responseText;
hr.open("GET", "listRoul.php?t=" + Math.random(), true);

I tried using


but it didn't work!


If the content's already visible (which it would be by default), you'll need to hide it before it can fade in:



$('#b1').click(function () {
$('#b2').click(function () {
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b1" type="button" data-text="lorem ipsum">One</button>
<div id="one"></div>
<button id="b2" type="button" data-text="lorem ipsum">Two</button>
<div id="two"></div>