jquery - 使用 JQuery 创建滑动时间轴

Question

我正在尝试创建一个带有按钮的简单滑动时间轴。换句话说，当我单击箭头按钮时，我希望一个 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');
});

希望这个问题足够清楚。有人有什么建议吗？

Answer 1

你的 jquery 代码有很多问题..用下面的代码替换它..它会工作

$("#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');
          });
    });
});