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>

そのため、タブが になるselectedと、前のタブのコンテンツが Github のファイル マネージャーのように横にスライドし、現在のコンテンツ用のスペースを作る必要があります。Github のコードからは見つけられなかったので、ここで質問します。可能であれば、これには CSS のみが必要ですが、Javascript ソリューションも十分に受け入れられています (アニメーション ライブラリを必要としない場合のみ)。

CSS 疑似セレクターを使用してこれを機能させることができると思い:targetましたが、アニメーションの部分はまだわかりません。

4

1 に答える 1

0

ソリューション
タイムアウトを使用する必要はありませんでした。JQuery エフェクトがコールバックをサポートしていることを発見しました。toggleしたがって、より適切なshowおよびに置き換えた後、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 に答える