如何创建一个类似于Github的文件管理器的动画？

Question

我想把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>

因此，当标签变成selected时，前一个标签的内容应该像Github的文件管理器一样横向滑动，并为当前内容腾出空间。我不能从Github的代码中发现它，所以我在这里问。如果可能，这应该只需要CSS，但Javascript解决方案被广泛接受(只有在不需要动画库的情况下)。

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

Answer 1

解决方案

不需要使用超时，我发现JQuery effects支持回调。因此，在用更贴切的show和hide替换toggle之后，它可以很好地工作：

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;
});