Question

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

当我点击上面的导航时，我正在尝试使用其中的内容滑动标签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');
  });

});

我尝试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

jQuery ui tabs：在标签之间切换时的滑动效果

1 个答案: