如何使用jQuery UI选项卡进行CSS转换？

Question

当用户点击标签页时，我希望标签之间平滑过渡。

我知道jQuery标签支持基本动画（请参阅关于animation fx的这个问题），但我该如何进行平滑过渡？

Answer 1

多年来，事情变得更加轻松，现在它已成为内置选项，例如，向左滑动和从右向滑动只是：

$("#tabs .tabs-container-wrapper .tabs-container").tabs({
        hide: { effect: "slide", duration: 800, direction: "left", easing: "easeInOutQuart" },
        show: { effect: "slide", duration: 800, direction: "right", easing: "easeInOutQuart" }
});

Answer 2

你需要做一些事情来实现这个目的：

1. 不要使用jQuery UI附带的CSS

2. 构建HTML，以便您的标签可以左右滑动。

3. 为“左”转换添加CSS。例如：

   #tabs .tabs-container-wrapper .tabs-container { transition:left 0.5s ease-in-out; }
   

4. 选择标签后，请更改“左”值。

   $(function() {
     var onTabChange = function(event, ui) {
       $("#tabs .tabs-container-wrapper .tabs-container").css("left", offsets[ui.index]);
     };
     $('#tabs').tabs().bind('tabsselect', onTabChange);
   });
   

请参阅this gist for a full working example。

这适用于支持转换的现代浏览器，如果不支持转换，则会回退到普通的标签行为。