Question

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

目前我有：

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

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

Answer 1

不确定您使用的是哪个版本，但1.7.1是如何做到的：

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

Answer 2

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

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

如果使用'width'，jQuery将使用width属性创建效果，因此是水平动画。你也可以使用高度和宽度来产生对角线效果。

也尝试'隐藏'和'显示'关键字而不是'切换'，它们也很酷：）

Answer 3

Answer 4

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

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