2

我想将 Github 文件管理器中的相同动画添加到页面中，当您导航树时会出现该动画：框横向滑动，为另一个框腾出空间。

当前结构是（简化的）：

<div class="tabs">
  <ul>
    <li><a href="#foo" class="selected">Foo</a></li>
    <li><a href="#etc">Etc 1</a></li>
    <li><a href="#bla">Bla bla</a></li>
    <li><a href="#fourth">Fourth tab</a></li>
  </ul>
</div>
<!-- Tabs content -->
<div class="content">
  <div id="#foo"></div>
  <div id="#etc"></div>
  <div id="#bla"></div>
  <div id="#fourth"></div>
</div>

所以，当一个 tab 变成 时selected，之前的 tab 内容应该像 Github 的文件管理器一样横向滑动，并为当前内容腾出空间。我没能从 Github 的代码中发现它，所以我在这里问。如果可能的话，这应该只需要 CSS，但 Javascript 解决方案很受欢迎（仅在不需要动画库的情况下）。

我以为我可以使用 CSS 伪选择器:target来完成这项工作，但我还没有弄清楚动画部分。

4

1 回答 1

0

解决
方法不需要使用超时，我发现JQuery 效果支持回调。因此，在替换toggle为更 apt showand之后hide，它的效果非常好：

var tabs = $('.tabs ul li a')
tabs.click(function () {
    var previous = tabs.filter('.selected');
    // Prevent the event to happen if the user clicks the currently
    // selected tab
    if (previous.attr('href') === $(this).attr('href')) {
        return;
    }
    var direction = tabs.index($(this)) - tabs.index(previous);
    var options = direction > 0 ? [{direction: 'left'}, {direction: 'right'}] :
                                  [{direction: 'right'}, {direction: 'left'}]
    previous.removeClass('selected');
    $(this).addClass('selected');
    var previous_content = $(previous.attr('href'));
    var this_content = $($(this).attr('href'));
    previous_content.hide('slide', options[0], 300, function () {
        this_content.show('slide', options[1], 300);
    });
});

我什至添加了这个来处理按键（左右箭头键）：

$(document).keydown(function (e) {
    var direction;
    switch (e.which) {
        case 37:
            direction = -1;
            break;
        case 39:
            direction = 1;
            break;
        default:
            return;
    }
    var next = tabs.index(tabs.filter('.selected')) + direction;
    if (next < 0 || next >= tabs.length) return;
    tabs.eq(next).trigger('click');
    return false;
});
于 2013-06-16T14:28:58.587 回答