Javascript jQuery ui选项卡：在选项卡之间切换时的滑动效果

我正在使用jQueryUI选项卡。我想在选项卡之间切换时应用滑动内容效果，即显示和隐藏选项卡内容。这是我的

当我点击上面的导航时，我正试图滑动包含内容的选项卡div。因此导航链接1会将#tabs-1的内容滑动到屏幕前面，等等

我目前的脚本没有滑动功能，它是：

$(document).ready(function () {
  $('#tabs').tabs();

  $('.sub-nav a').click(function () {
    $('.sub-nav li a').removeClass('subnav-active');
    $(this).addClass('subnav-active');
  });

});

---

我试着做了

滑动切换

，以及

淡出

和

淡入

效果，但两种效果都无法发挥作用。因此，我正在寻求一些帮助，即使只是找个地方看看，这将是非常感谢的，因为我在javascript或jQuery方面不是最棒的。

jQueryUI具有内置的效果。不需要自己动手

---

下面是一个显示和隐藏效果的示例：

jQueryUI内置了效果。不需要自己动手

---

下面是一个显示和隐藏效果的示例：

我看不出您试图在代码中操作选项卡内容的位置。这是我目前的问题。我尝试过的东西后来被移除了，因为它们不起作用。让我看看我是否还有一个我尝试过的例子。我看不出你试图在代码中操作选项卡内容的地方。这是我目前的问题。我尝试过的东西后来被移除了，因为它们不起作用。让我看看我是否还有一个我尝试过的例子。

$('#tabs').tabs({
    hide: {
        effect: "slide",
        duration: 1000
    }
});