Jquery Bootstrap 3个选项卡平滑滑动和向下滑动过渡效果？

一段时间以来，我一直试图在引导选项卡上实现平滑、可靠的slideUp和slideDown jQuery转换效果。想知道我是不是做错了？我在JSFIDLE上提供了一个这样的示例，如下所示：

但这似乎只在某些时候起作用，而且不会一直向上滑动，但肯定会一直向下滑动。我如何确保它在滑下之前一直向上滑动

我使用的jQuery是：

$('#menuSub').on('show.bs.tab', function (e) {

    // If this is not defined than we are showing for the first time!
    // Add in the Bluebar Class (selected)!
    if (e.relatedTarget === undefined) {
        $("#menuSub").find(".content-sub").addClass("selected");
        $($(e.target).attr('href')).slideDown('slow');
    }
    else {
        $($(e.relatedTarget).attr('href')).slideUp({ duration: 'fast', queue: true,
            done: function() {
                $($(e.target).attr('href')).slideDown('slow');
            }
        });
    }
});

我的目标是

show.bs.tab

事件。我很确定我是在正确的情况下做的，但是，也许我在这里没有正确地使用

.done

或

.promise

有人能告诉我使用引导选项卡的正确方法吗

---

谢谢大家!

怎么样？是的，看起来很棒，非常感谢！我想知道为什么这需要一个

setTimeout

函数呢？在上滑结束后开始下滑怎么样？是的，看起来很棒，非常感谢！我想知道为什么这需要一个

setTimeout

函数，以便在“向上滑动”结束后开始向下滑动