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

Question

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

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

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

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

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

});

我尝试过slideToggle，以及fading out 和fading in 效果，但都无法工作。所以我正在寻求一些帮助，即使它只是在某个地方寻找，我将不胜感激，因为我不是最擅长 javascript 或 jQuery。

Answer 1

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

http://api.jqueryui.com/slide-effect/

http://jsfiddle.net/isherwood/9jg4r/4/

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

这是一个显示和隐藏效果的示例：http://jsfiddle.net/isherwood/9jg4r/5