where do i put jQuery .fade() function in ajax success callback?

Question

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';
$.ajax({
    type: "GET",
    url: "/Home/LoadCurrentCourses/?masterKey=" + masterKey + "&status=" + status,
    dataType: "html",
    success: function (evt) {
        $('#currentCourses').fadeIn(1500, function () { $('#currentCourses').html(evt) });
    },
    error: function (req, status, error) {
        $('#currentCourses').html("<p>Error occured retrieving current courses</p>");
    }
});

}

the #currentCourses markup just has a header and loading .gif in there.

<div class="span4 moduleBox" id="currentCourses">
    <h2>Current Courses</h2>
    <img style="margin-left: 45%; margin-top: 5%; margin-bottom: 5%;" src="~/Images/11.gif" />
</div>

The ajax is being called from my main page on doc.ready():

    <script>
    $(document).ready(function () {
        var masterKey = '@Model.MasterKey';

        //load degree overview
        LoadCurrentCourses(masterKey);

    });
</script>

What I am trying to do is one the data gets returned I would like the html to slowly fade in to the main page, replacing the gif and header. Right now it works fine, everything loads, and is replaced, but I can't seem to figure out where I should put the jQuery .fadein() method.

Any ideas?

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

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