Jquery ui 选项卡的不同动画答案

【问题标题】：Different animations for Jquery ui tabsJquery ui 选项卡的不同动画
【发布时间】：2009-05-26 13:20:41
【问题描述】：

我正在使用 jquery ui 选项卡小部件。我没有使用过 jquery 主题，因为我更喜欢自己做 css 和东西。我已经让它工作了，但我想要的是在单击不同的选项卡时为选项卡内容提供不同的动画效果。我想要的是新标签内容从左侧滑入。

目前我有：

$("#tabs").tabs({ fx: {slide: 'slow' } }); });

我知道上面的代码只是滑动而不是向左滑动，但它甚至没有滑动！我已经下载了幻灯片效果作为我的自定义 ui 下载的一部分。我不知道为什么它不起作用！是我缺少一些CSS吗？！不知道！！！

【问题讨论】：

不！我已经尝试了各种方法，并查看了 jquery ui 下载，以确保我下载了正确的东西。无论我要求它执行什么效果，它只是做同样的事情，隐藏旧内容，显示新内容。
这里是 jQueryUI Tabs 小部件文档api.jqueryui.com/tabs/#option-show 的链接以及 jQueryUI 动画效果列表jqueryui.com/effect

标签： jquery-ui

【解决方案1】：

不确定您使用的是哪个版本，但使用 1.7.1 的方法如下：

$("#tabs").tabs({ 
    fx: { height: 'toggle', duration: 'slow' }
});

【讨论】：

【解决方案2】：

我知道这个问题已经超过一年了，但你可以试试这个：

$('#tabs').tabs(
{
   fx: { width: 'toggle', duration: '500' }
});

如果你使用 'width'，jQuery 将使用 width 属性创建效果，从而产生水平动画。您还可以同时使用高度和宽度来实现对角线效果。

也可以尝试使用“隐藏”和“显示”关键字而不是“切换”，它们也很酷:)

【讨论】：

【解决方案3】：

试试这个：http://www.eduteka.org/ajax/tabs3/ 更多选择

【讨论】：

【解决方案4】：

只是为了更新这个问题的答案，使用 1.10 版的 jquery ui，我使用了“显示”选项在选项卡上应用过渡效果。这里的 jquery ui 文档中有一个示例：

$( ".selector" ).tabs({ show: { effect: "blind", duration: 800 } });

【讨论】：