如何使用jQueryUI选项卡进行CSS转换

How do I do CSS transitions with jQuery UI tabs?

本文关键字：CSS 转换 何使用 jQueryUI 选项      更新时间：2023-09-26

当用户单击选项卡时，我希望选项卡之间的平滑转换。

我知道jQuery选项卡支持基本的动画（请参阅这个关于动画fx的问题），但我如何才能进行平滑过渡？

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

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

您需要做一些事情来实现这一点：

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

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

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

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

  4. 选择选项卡后，更改"left"值。

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

有关完整的工作示例，请参阅此要点。

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

相关文章：