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