JavaScript make AJAX content fade in

Question

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);
    hr.send();
}

I tried using

$('#viewRoul').html(html).fadeIn() 

but it didn't work!

Answer 1

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

$('#viewRoul').html(html).hide().fadeIn();

Example:

$('#b1').click(function () {
    $('#one').html($(this).data('text')).fadeIn();
});
$('#b2').click(function () {
    $('#two').html($(this).data('text')).hide().fadeIn();
});

<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>