jQuery: run css related method AFTER previous css method is completed

I am doing the following through jQuery, but it looks l开发者_运维问答ike they are almost happening simultaneously.

Is there a way to make sure itemNameContainer.removeClass('NoDisplay') in the complete callback to run only after the loadingContainer.addClass('NoDisplay') is completed?

Visually, it looks like I am seeing 'Please wait..' and the item name show up at the same time..

function onToggleItemCompletionStatus(currentItem) {
    var itemId, toggle = !currentItem.Completed,
        loadingContainer, itemNameContainer;
    itemId = currentItem.ItemId;
    loadingContainer = $('#loading_' + itemId);
    itemNameContainer = $('#name_' + itemId);

    $.ajax({
        beforeSend: function (xhr, settings) {
            loadingContainer.removeClass('noDisplay');
            itemNameContainer.addClass('noDisplay');
        },
        complete: function (xhr, textStatus) {
            loadingContainer.addClass('noDisplay');
            itemNameContainer.removeClass('noDisplay');
        },
        data: {
            accessToken: aToken,
            listId: currentGroceryList.Id,
            itemId: currentItem.ItemId,
            completed: toggle
        },
        dateType: 'json',
        error: function (xhr, textStatus, errorThrown) {
            $.publish(customEvent.ItemToggledFail, [currentItem]);
        },
        success: function (data, textStatus, xhr) {
            var success = data.success;

            if (success) {
                $.publish(customEvent.ItemToggledSuccess, [currentItem]);
            } else {
                $.publish(customEvent.ItemToggledFail, [currentItem]);
            }
        },
        type: 'POST',
        url: actionUrls.toggleItemCompletionStatus
    });
}

EDIT I pasted the actual function to give a better idea

Not that I know of, but you could try...

loadContainer.fadeOut(300, function() {
   itemNameContainer.removeClass('NoDisplay');
});