FadeOut не удается для части выбранного HTML (JQuery)

Question

Я использую функции fadeOut () и fadeIn (), чтобы заменить 1 блок html на другой. Когда я исчезаю во втором блоке html, я удаляю первый блок из DOM.

//Fade out the first view, fadein the second, then remove the first from the DOM
$("#courses_body").children(":first-child").fadeOut("slow", function() {
    var that = this;
    courses.fadeIn('slow', function() {
        $(that).remove();
    });
});

Проблема, с которой я столкнулся, связана с эффектом fadeOut (). Часть выбранного html (заголовка) постепенно исчезает, но остальная часть просто ждет до конца эффекта и выскакивает со страницы (то есть мгновенно исчезает). Почему эта часть моего выбора не исчезает?

РЕДАКТИРОВАТЬ в ответ на комментарии:

Вот некоторый код, который я пытаюсь, но не могу исчезнуть:

        <span class="day_body"><%= course.day %></span>
        <span class="time_body"><%= course.time %></span>           
        <span class="units_body"><%= course.units_alt %></span>
        <span class="limitations_body"><%= course.limitations %></span>
        <span class="exam_body"><%= course.exam_type %></span>
        <span class="paper_body"><%= course.paper_type %></span>

В моем css я установил их все для отображения: inline-block, поэтому они должны быть подвержены исчезновению.

Редактировать # 2: Просто протестируйте эти промежутки в консоли, и они действительно исчезают, когда я просто вызываю их напрямую.