如何使用 jQuery 选项卡为选项卡本身（不仅仅是内容）设置动画答案

【问题标题】：How can you animate the tabs themselves (not just the content) with jQuery tabs如何使用 jQuery 选项卡为选项卡本身（不仅仅是内容）设置动画
【发布时间】：2014-01-03 01:28:53
【问题描述】：

我看过但找不到是否可以动画从一个选项卡到另一个选项卡的过渡。我指的是实际的标签，而不仅仅是标签的内容。

我希望前一个标签按钮淡出，而点击的标签按钮淡入。

以下仅对内容进行动画处理：

$( "#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>

【问题讨论】：

你能提供你的 html 的 sn-p 吗？
HTML 按要求添加。这只是标准标记。没什么特别的，但我希望标签和标签的内容一样过渡。

标签： jquery jquery-ui user-interface tabs

【解决方案1】：

我认为 JQuery Tabs 小部件没有此选项。您可以轻松地手动编写代码以添加和删除一个类并为其设置动画（尽管可能使用 JQ on click。

$("#tabs ul li").bind("点击", function(){ $("#tabs ul li").removeClass("ui-tabs-active ui-state-active"); $(this).addClass("ui-tabs-active ui-state-active"); });

【讨论】：

感谢您的建议。我尝试了以下操作，但它仍然没有为选项卡设置动画。对我有什么问题有任何见解吗？ $("#tabs ul li").bind("click", function(){ $("#tabs #subtabs6 ul li").removeClass("ui-tabs-active ui-state-active").animate( { opacity: 0 }, 1000, function() {}); $(this).addClass("ui-tabs-active ui-state-active").animate({ opacity: 1 }, 1000, function() { }); });

【解决方案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() {});});

}
});

【讨论】：