Javascript JQuery UI选项卡-自定义动画

我需要创建这样的动画-

使用JQuery UI选项卡-

当我需要为容器创建动画时出现问题。最新版本中只有显示/隐藏选项，不支持fx选项。我怎样才能做到呢

主要问题：是否有人可以提供代码笔/摆弄自定义函数动画（这样每个人都会受益），比如显示/隐藏方法中的函数？有可能吗

$（文档）.ready（函数（）{
//变数
var clickedTab=$（“.tabs>.active”）；
var tabWrapper=$（“.tab_u内容”）；
var activeTab=tabWrapper.find（“.active”）；
var activeTabHeight=activeTab.outerHeight（）；
//页面加载时显示选项卡
activeTab.show（）；
//设置页面加载时包装的高度
tabWrapper.height（activeTabHeight）；
$（“.tabs>li”）。在（“单击”，函数（）{
//从活动选项卡中删除类
$（“.tabs>li”）.removeClass（“活动”）；
//将活动类添加到单击的选项卡
$（此）.addClass（“活动”）；
//更新clickedTab变量
单击选项卡=$（“.tabs.active”）；
//淡出活动选项卡
activeTab.fadeOut（250，函数（）{
//删除活动类所有选项卡
$（“.tab_uucontent>li”）.removeClass（“活动”）；
//获取已单击选项卡的索引
var clickedTabIndex=clickedTab.index（）；
//将活动类添加到相应的选项卡
$（“.tab\u content>li”）.eq（单击Tabindex.addClass（“活动”）；
//更新新的活动选项卡
activeTab=$（“.tab\uu content>.active”）；
//更新变量
activeTabHeight=activeTab.outerHeight（）；
//将包装高度设置为新选项卡高度的动画
tabWrapper.stop（）.delay（50）.设置动画({
高度：活动选项卡高度
}，500，函数（）{
//淡入活动选项卡
activeTab.delay（50）、fadeIn（250）；
});
});
});
//变数
var colorButton=$（“.colors li”）；
colorButton.on（“单击”，函数（）{
//从当前活动按钮中删除类
$（“.colors>li”）.removeClass（“活动颜色”）；
//将活动类添加到单击的按钮
$（此）.addClass（“活动颜色”）；
//获取所单击对象的背景色
var newColor=$（this.attr（“数据颜色”）；
//使用class.bg颜色更改所有内容的背景
$（“.bg color”）.css（“背景色”，newColor）；
//使用类更改所有内容的颜色。文本颜色
$（“.text color”）.css（“color”，newColor）；
});
});
*{
框大小：边框框；
填充：0；
保证金：0；
}
身体{
字体系列：“开放式Sans”，无衬线；
颜色：#50555a；
}
梅因先生{
填充：100px 20px；
}
导航{
z指数：9；
边框底部：1px实心rgba（0,0,0,0.1）；
颜色：白色；
位置：固定；
排名：0；
左：0；
宽度：100%；
填充：20px0；
文本对齐：居中；
}
.bg颜色{
背景色：#46a1de；
过渡时间：.5s；
}
.文字颜色{
颜色：#46a1de；
过渡时间：.5s；
}
页脚{
填充：40px0；
文本对齐：居中；
不透明度：.33；
颜色：白色；
}
.包装纸{
最小宽度：600px；
最大宽度：900px；
保证金：0自动；
}
.标签{
显示：表格；
表布局：固定；
宽度：100%；
-webkit转换：translateY（5px）；
变换：translateY（5px）；
}
.tabs>li{
过渡持续时间：.25s；
显示：表格单元格；
列表样式：无；
文本对齐：居中；
填充：20px 20px 25px 20px；
位置：相对位置；
溢出：隐藏；
光标：指针；
颜色：白色；
}
.tabs>li:之前{
z指数：-1；
位置：绝对位置；
内容：“；
宽度：100%；
身高：120%；
排名：0；
左：0；
背景色：rgba（255、255、255、0.3）；
-webkit转换：translateY（100%）；
转化：translateY（100%）；
过渡持续时间：.25s；
边界半径：5px5px0；
}
.tabs>li:悬停：之前{
-webkit转换：translateY（70%）；
转化：translateY（70%）；
}
.tabs>li.active{
颜色：#50555a；
}
.tabs>li.active:之前{
过渡时间：.5s；
背景色：白色；
-webkit转换：translateY（0）；
变换：translateY（0）；
}
.tab\u内容{
背景色：白色；
位置：相对位置；
宽度：100%；
边界半径：5px；
}
.tab\u内容>li{
宽度：100%；
位置：绝对位置；
排名：0；
左：0；
显示：无；
列表样式：无；
}
.tab\u内容>li.content\u包装{
文本对齐：居中；
边界半径：5px；
宽度：100%；
填充：45px40px40px40px；
背景色：白色；
}
.content\uu包装器h2{
宽度：100%；
文本对齐：居中；
垫底：20px；
字体大小：300；
}
.content\u包装器img{
宽度：100%；
高度：自动；
边界半径：5px；
}
.颜色{
文本对齐：居中；
填充顶部：20px；
}
.colors>li{
列表样式：无；
宽度：50px；
高度：50px；
边界半径：50%；
边框底部：5px实心rgba（0,0,0,0.1）；
显示：内联块；
利润率：0.10px；
光标：指针；
过渡持续时间：.2s；
盒影：0 2px1pRGBA（0,0,0,0.2）；
}
.colors>li:悬停{
-webkit转换：规模（1.2）；
转换：比例（1.2）；
边框底部：10px实心rgba（0,0,0,0.15）；
盒影：0 10px 10px rgba（0,0,0,0.2）；
}
.colors>li.active-color{
-webkit转换：缩放（1.2）translateY（-10px）；
变换：比例（1.2）translateY（-10px）；
盒影：0 10px 10px rgba（0,0,0,0.2）；
边框底部：20px实心rgba（0,0,0,0.15）；
}
.colors>li:n子项（1）{
背景色：#2ecc71；
}
.colors>li:n子项（2）{
背景色：#D64A4B；
}
.colors>li:n子项（3）{
背景色：#8e44ad；
}
.colors>li:n子项（4）{
背景色：#46a1de；
}
.colors>li:n子项（5）{
背景色：#bdc3c7；
}

自适应选项卡

颜色
最喜欢的电影
关于



挑选颜色