Bootstrap 3 Tabs平滑Slideup和Slidedown过渡效果？

Question

我一直试图在Bootstrap Tabs上实现一个平滑，可靠的slideUp和slideDown jQuery过渡效果。想知道我是否做错了？我在jsfiddle上汇总了一个例子：https://jsfiddle.net/xudjomxq/1/

但这似乎有时只能起作用而且不会一直滑动，但肯定会一直滑下来。在滑下之前，我怎样才能确保它一直向上滑动？

我使用的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？

有人可以通过Bootstrap标签向我显示正确的方法吗？

谢谢！