Reputation: 546
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!
Upvotes: 3
Views: 3899
Reputation: 179284
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>
Upvotes: 4
Reputation: 841
Set your #viewroul div to display hidden, if it's supposed to be hidden initially. And on Ajax success. Just make #viewroul fade In. or also #viewroul.show('slow');
Upvotes: 0
Reputation:
The "viewRoul" element is visible, you need to hide it first.
$('#viewRoul').hide().html(html).fadeIn('slow');
You can read more about jQuery ui here fadeIn
Upvotes: 0
Reputation: 10014
Try this:
$('#MyDiv').hide().html(content).fadeIn({ duration: 2000 });
JSFiddle: http://jsfiddle.net/nYbHs/
You can adjust the speed by changing duration. Here is more documentation on fadeIn: http://api.jquery.com/fadeIn/
Clarification update: This code needs to go in your ajax callback function. The content would be either the response itself (if it's already in the HTML format you want) or the response parsed into a content string in the HTML format that you want.
Like this:
$.ajax(
{
url: yourUrl,
type: 'get',
data: yourData,
async: true,
success: function(response)
{
$('#MyDiv').hide().html(response).fadeIn({ duration: 2000 });
}
});
Upvotes: 0