部分选定的 html (jquery) 的淡出失败

Question

我正在使用 fadeOut() 和 fadeIn() 函数将 1 个 html 块交换为另一个 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中，我已将它们全部设置为display：inline-block，因此它们应该能够淡出。

编辑#2：刚刚在控制台中测试了这些跨度，当我直接调用它们时它们确实会淡出。