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

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

$（“＃tabs ul li”）。bind（“click”，function（）{ $（“＃tabs ul li”）。removeClass（“ui-tabs-active ui-state-active”）; $（this）.addClass（“ui-tabs-active ui-state-active”）; }）;

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() {});});

}
});

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

2 个答案: