James James - 3 months ago 12
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);
hr.send();
}


I tried using

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


but it didn't work!

Answer

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>

Comments