用JQuery創建滑動時間軸

Question

我正在嘗試用按鈕創建一個簡單的滑動時間軸。換句話說，當我點擊箭頭按鈕時，我想讓一個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> 

的Jquery：

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

希望這個問題是非常明顯的。有沒有人有什麼建議？

Answer 1

jQuery代碼中有很多問題的代碼..replace它下面..它會工作

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