javascript - 如何像轮播一样将选项卡滑入和滑出

Question

我试图让 jQuery UI 选项卡中的幻灯片看起来好像彼此相邻并且有些依附。我想我可以通过同时运行显示和隐藏动画来实现这一点。

目前，jQuery 会先滑出当前面板，然后再滑出下一个面板。如何在滑出当前面板的同时滑入下一个面板？

$("#tabs").tabs({
hide:{effect:"slide", direction:"right"},
show:{effect:"slide", direction:"left"}
});

http://jsfiddle.net/CnEUh/2372/

我想同时启动 hide: 和 show: 效果，而不是一个接一个地启动

Answer 1

这是基于我的原始评论的版本。

这保留了 jQuery 的选项卡系统，但隐藏了现有的选项卡。新的 slidingTabs div 包含滑动标签，因此它们可以是动画的。

更新

应要求，初始内容保持原样。

function makeTabsIntoSlidingTabs($tabs) {
  $tabs.find("div").wrapAll("<div style='display:none' />");
  $tabs.append("<div class='slidingTabs' />");
  $tabs.children("div").first().find("div").each(function(i) {
    $tabs.find(".slidingTabs").append($("<div />").addClass("tab").html($(this).html()));
  });

  $tabs.tabs({
    activate: function(event, ui) {
      var tab = $tabs.tabs("option", "active");
      $tabs.find(".slidingTabs div").first().animate({
        marginLeft: (tab * -100) + '%'
      }, 400, function() {});
    }
  });
}

makeTabsIntoSlidingTabs($("#tabs"));

.slidingTabs {
  white-space: nowrap;
  overflow-x: hidden;
}
.slidingTabs .tab {
  width: 100%;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" />


<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a>
    </li>
    <li><a href="#tabs-2">Tab 2</a>
    </li>
    <li><a href="#tabs-3">Tab 3</a>
    </li>
  </ul>
  <div id="tabs-1">
    <p>Content for Tab 1</p>
  </div>
  <div id="tabs-2">
    <p>Content for Tab 2</p>
  </div>
  <div id="tabs-3">
    <p>Content for Tab 3</p>
  </div>
</div>