Where Do I Put Jquery .fade() Function In Ajax Success Callback?

I have an ajax call that is populating a portion of my page with the html it returning in the success callback: function LoadCurrentCourses(masterKey, status) { status = 'S'; $.aja

Solution 1:

You should load the text before fading in

success: function (evt) {
    $('#currentCourses').html(evt);
    $('#currentCourses').fadeIn(1500);
},

You may also need to fadeout or hide that container before fading in, or it will appear to do nothing and just load the new data.

Solution 2:

Should be like:

success: function (evt) {
    $('#currentCourses').html( evt ).fadeIn(1500);
}

Fade in after the element is populated, otherwise calling .html() inside the .fadeIn() callback will result in:

fade--(fade ends)-->--(HTML applied)