如何向 UI 选项卡添加交叉淡入淡出？答案

【问题标题】：How to add a cross fade to UI tabs?如何向 UI 选项卡添加交叉淡入淡出？
【发布时间】：2011-01-09 13:17:16
【问题描述】：

您好，我从http://forum.jquery.com/topic/how-to-add-a-cross-fade-to-ui-tabs 复制问题，因为我有同样的问题。

大家好

我已经使用标准 UI 选项卡代码设置了一个选项卡式界面。

<script type="text/javascript">
$(function() {
$("#tabbedArea").tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 6000, 'true')
});
</script>

此时作为一个显示的选项卡淡出，在下一个选项卡出现之前留下一个空白。

我想要发生的是 tab1 淡出，tab 2 淡入 - 创建交叉淡入淡出。

谁能告诉我如何做到这一点？

提前致谢

【问题讨论】：

可能重复：stackoverflow.com/questions/1350666/…
问题没有正确回答 - 在变化和不正确的交叉淡入淡出之间仍然是白色的。所以我的问题仍然没有回答

标签： jquery jquery-ui jquery-ui-tabs fade

【解决方案1】：

我认为 Jquery UI 默认无法做到这一点。但是 jQuery Tabs UI comes with a event "show"，您可以在其中编写一些自定义代码来自己切换选项卡。

$(document).ready(function() {
    $("#tabs").tabs({

        show: function(event, ui) {

            var lastOpenedPanel = $(this).data("lastOpenedPanel");

            if (!$(this).data("topPositionTab")) {
                $(this).data("topPositionTab", $(ui.panel).position().top)
            }         

            //Dont use the builtin fx effects. This will fade in/out both tabs, we dont want that
            //Fadein the new tab yourself            
            $(ui.panel).hide().fadeIn(500);

            if (lastOpenedPanel) {

                // 1. Show the previous opened tab by removing the jQuery UI class
                // 2. Make the tab temporary position:absolute so the two tabs will overlap
                // 3. Set topposition so they will overlap if you go from tab 1 to tab 0
                // 4. Remove position:absolute after animation
                lastOpenedPanel
                    .toggleClass("ui-tabs-hide")
                    .css("position", "absolute")
                    .css("top", $(this).data("topPositionTab") + "px")
                    .fadeOut(500, function() {
                        $(this)
                        .css("position", "");
                    });

            }

            //Saving the last tab has been opened
            $(this).data("lastOpenedPanel", $(ui.panel));

        }

    });
});

现场演示：

http://jsfiddle.net/FFTzU/7/

【讨论】：

是否可以使其兼容最新版本的jQuery（1.10.1）和jQuery UI（1.10.3）？
非常有用的提示。谢谢！

【解决方案2】：

很好的答案理查德正是我所需要的！我认为您的解决方案调用了 2 个动画（淡出和淡入），在我的 js-heavy 页面上看起来不太流畅。我已经稍微编辑了您的解决方案以使用 z-index 和 1 fade 。这至少对我来说让事情变得更顺利。

$("#tabs").tabs({
  show: function(event, ui) {
    var lastOpenedPanel = $(this).data("lastOpenedPanel");
    if (!$(this).data("topPositionTab")) {
        $(this).data("topPositionTab", $(ui.panel).position().top)
    }
    // do crossfade of tabs
    $(ui.panel).hide().css('z-index', 2).fadeIn(1000, function() {
      $(this).css('z-index', '');
      if (lastOpenedPanel) 
      {
        lastOpenedPanel
          .toggleClass("ui-tabs-hide")
          .hide();
      }
    });

    $(this).data("lastOpenedPanel", $(ui.panel));
  } 
}).tabs('rotate', 3000);

我在最后添加了旋转，因为这样可以制作非常漂亮的幻灯片！

汤姆

【讨论】：

【解决方案3】：

我不知道上述答案是否适用于早期版本的 jQuery UI，但 show 和 hide 属性目前不能以这种方式工作。使用beforeActivate可以达到效果：

$("#tabbedArea").tabs({
    hide: 1000,
    beforeActivate: function(event, ui){
        ui.newPanel.css('zIndex', 1).fadeIn(1000, function(){
            $(this).css('zIndex', '');
        });
    }
});

注意标签面板必须绝对定位。

【讨论】：