jquery - JQuery を使用してスライドするタイムラインを作成する

Question

ボタンを使用して単純なスライド タイムラインを作成しようとしています。つまり、矢印ボタンをクリックすると、1 つの DIV がスライドし、別の DIV がその場所にスライドします。私が書いたコードは正しい軌道に乗っていますか、それとも別のルートを検討する必要がありますか?

これまでに書いたコードは次のとおりです。

HTML:

<section id="b2bTimeline" class="center">

<div id="arrows">
        <div id="tabOne">
            <a href="#" class="activeTab"><img src="arrowRight.png" /></a>
        </div>
        <div id="tabTwo">
            <a href="#" class="activeTab"><img src="arrowLeft.png" /></a>
        </div>
   </div>

   <div class="cBoth"></div>

    <div id="timelineListOne">
        <div id="five">
            <h4>2005</h4>
            <h5>our first client.</h5>
            <h6>06/2005</h6>
            <p></p>
        </div>

        <div id="seven">
            <h4>2007</h4>
            <h5>we go full-time.</h5>
            <h6>06/2007</h6>
            <p></p>
        </div>

        <div id="eightA">
            <h4>2008</h4>
            <h5>we go mobile.</h5>
            <h6>07/2008</h6>
            <p></p>
       </div>              
   </div>

   <div id="timelineListTwo">
        <div id="eightB">
        <h4>2008</h4>
        <h5>we incorporate.</h5>
        <h6>11/2008</h6>
            <p></p>
  </div>

  <div id="ten">
        <h4>2010</h4>
        <h5>we expand.</h5>
        <h6>06/2010</h6>
            <p></p>
   </div>

   <div id="twelve">   
        <h4>2012</h4>
            <h5>game changers.</h5>
            <h6>06/2012</h6>
                <p></p> 
    </div>
</div>

   <div id="timelineListThree">
        <div id="thirteen">
            <h4>2013</h4>
            <h5>facelift & future.</h5>
            <h6>06/2013</h6>
                <p></p>
        </div>
   </div>

</section>

Jクエリ:

$("#tabOne").click(function(){
var slide = ('#timelineListOne', '#timelineListTwo', '#timelineListThree')
    $('slide').each(function(){
            $(this).animate({marginLeft:'-1200px'}, 'slow', function(){
    $(this).animate({marginLeft: '-50px'}, 'slow');
});

この質問が十分に明確であることを願っています。誰か提案はありますか？