如何使用jQuery选项卡设置选项卡本身(而不仅仅是内容)的动画

Question

我看过，但找不到是否可以为从一个选项卡到另一个选项卡的转换设置动画。我指的是实际的选项卡，而不仅仅是选项卡的内容。

我希望上一个选项卡按钮淡出，而点击的选项卡按钮淡入。

以下仅对内容设置动画：

$( "#tabs" ).tabs({ hide: 'fadeOut', show: 'fadeIn' });

这可能吗？

HTML：

<div id="tabs">
<ul>
<li><a href="#fragment-1">One</a></li>
<li><a href="#fragment-2">Two</a></li>
<li><a href="#fragment-3">Three</a></li>
</ul>
<div id="fragment-1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh     euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>

Answer 1

我认为JQueryTabs小部件没有这个选项。你可以很容易地手动编写代码来添加和删除一个类并对其进行动画处理(也许可以在点击时使用JQ。

$("#tabs ul li").bind("click"，function(){$("#tabs ul li").removeClass("ui tabs active ui state active")；$(this).addClass("ui选项卡活动ui状态活动")；})；

Answer 2

我想好了如何做到这一点。

通过在beforeActivate中使用.newTab和.oldTab，我能够使实际的选项卡与内容相协调：

$( "#tabs" ).tabs({ hide: 'fadeOut', show: 'fadeIn' });
$( "#tabs").tabs({
beforeActivate: function( event, ui ) {
ui.newTab.animate({
opacity: 0
}, 0, function() {ui.newTab.animate({
opacity: 1
}, 0, function() {});});   
ui.oldTab.animate({
opacity: 0
}, 400, function() {ui.oldTab.animate({
opacity: 1
}, 0, function() {});});
}
});