jQuery fadeOut() overwriting fadeIn() if Ajax call takes less than 200ms

Question

I have the following HTML, CSS and Javascript:

HTML

<p id="loading">Loading...</p>
<div id="my-box"></div>
<input type="button" id="my-button" value="Click" />

CSS

#loading {
    display: none;
}

Javascript

$("#my-button").click( function() {

    $.ajax({
        type: 'POST',
        url: '/echo/html/',
        data: {html: "<p>Text echoed back to request</p>"},
        delay: 0,

        beforeSend: function(xhr) {

            $('#loading').fadeIn('fast', function() {
                $('#my-box').fadeOut();
            });

        },

        success: function(html){

            $('#my-box').stop(true, true).html(html).fadeIn('slow', function(){
                $("#loading").fadeOut("fast");
            });
        }
    });
});

There is a JSFiddle here here.

The problem is if the ajax call takes less than 200ms to execute, fadeOut() overwrites fadeIn() and #my-box become invisible instead of visible.

I am not seeing what can cause this. Any help will be very welcome.

Answer 1

You should use the same sequence in success for fadeOut() and fadeIn()

success: function (html) {
    $('#loading').fadeOut('fast', function () {
        $('#my-box').html(html).fadeIn();
    });
}

DEMO