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

jQuery ui tabs : sliding effect when switiching between tabs

本文关键字：tabs ui 之间 标签 jQuery      更新时间：2023-09-26

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

我试图滑动标签div与他们的内容，当我点击上面的导航。所以Nav link 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。

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
相关文章：