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

当用户单击选项卡时，我希望选项卡之间平滑过渡

---

我知道jQuery选项卡支持基本动画（请参见此问题），但如何实现平滑过渡？

您需要做一些事情才能使其正常工作：

不要使用jQuery UI附带的CSS

构造HTML，使选项卡可以左右滑动

为“左”过渡添加CSS。例如：

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

选择选项卡后，更改“左”值

看

---

这将适用于支持转换的现代浏览器，如果不支持，则会返回到正常的选项卡行为。

多年来，事情变得更容易了，现在它是一个内置选项，例如，从左向外和从右向内滑动只是：

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

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