jquery - DIV まで水平にスクロールし、特定の DIV を内部に表示する

Question

左にフロートされた 2 つの DIV を含む DIV コンテナーがあります。2 番目の DIV には、他の 3 つの DIV のスタックが含まれています。最初の DIV 内のリンクをクリックすると、次の DIV(id="red") までスクロールし、適切な DIV を表示します。たとえば、「scroll-to-2」というリンクをクリックすると、コンテナーを次の DIV (id="red") までスクロールして、2 番目の DIV を表示し、1 番目と 3 番目を非表示にします。ScrollTo プラグインを使用しようとしています。

これが私がjsfiddleで作ったスタートです。 http://jsfiddle.net/psivadasan/n9J57/2/

どんな助けにも感謝します。

HTML

<div class="container">
<div class="scrollable">
    <div id="blue" class="gray">
        <a class="scroll-1" href="#">Scroll to 1</a>
        <a class="scroll-2" href="#">Scroll to 2</a>
        <a class="scroll-3" href="#">Scroll to 3</a>
    </div>
    <div id="red" class="red">
        <div class="card">1</div>
        <div class="card">2</div>
        <div class="card">3</div>
    </div>
</div>

JS

$(‘#scroll-link-1’).click (function () {
$.scrollTo(‘#red’, 1000)});

CSS

.container {width: 400px;height: 200px;overflow-x: scroll;overflow-y: hidden;}.scrollable {width: 800px;height: 200px;}.gray {width: 400px; height: 200px;background-color: gray; float: left;}.red {width: 400px; height: 200px;background-color: red; float: left;}.card {width: 400px; height: 200px; position: absolute;}