javascript - jQuery ui 选项卡 : sliding effect when switiching between tabs

标签 javascript jquery jquery-ui jquery-ui-tabs

我正在使用 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 outfading 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

关于javascript - jQuery ui 选项卡 : sliding effect when switiching between tabs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24813339/

相关文章:

javascript - 检测在文本中右键单击了哪个词

javascript - 验证两个输入字段的总和

javascript - TemplateUrl 找不到我的模板

javascript - 仅输入 3 个字符和 3 个星号

javascript 不适用于动态添加的选项卡

jquery - 滚动出现在 JqGrid 列的标题中

javascript - DOM 查找 ID 返回未定义

javascript - Tablesorter 不会在初始页面加载时进行排序

jQuery 可排序在 IE 中不起作用

Jquery UI 可排序多个项目几乎可以工作,但还有一个问题