jQuery: запустить css связанный метод ПОСЛЕ предыдущего метода css завершен

Question

Я делаю следующее через jQuery, но похоже, что они почти происходят одновременно.

Есть ли способ убедиться, что itemNameContainer.removeClass ('NoDisplay') в полном обратном вызове запускается только после завершения загрузкиContainer.addClass ('NoDisplay')?

Визуально это выглядит, как я вижу «Пожалуйста, подождите ..» и имя элемента отображаются в то же время ..

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 я вставил фактическую функцию, чтобы дать лучшее идея

Answer 1

не то, что я не знаю, но вы можете попробовать ...

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