Ruby on Rails - Rspec - 控制器测试 - 嵌套路由(Ruby on Rails - Rspec - Controller test - nested route)

 在第一个Child-Cell的边缘使用.animate（）方法。 
 
 “细胞”类由200x200个盒子组成，全部向左浮动。 ID“容器”也是200x200，隐藏溢出。 您可以指定三个链接来动画第一个具有“单元格”类的div的左边距，这将根据您想要的数量向左或向右移动所有三个。 
 
 Link1 - > First Div Margin Left = 0; 
 Link2 - > First Div Margin Left = -200; 
 Link3 - > First Div Margin Left = - 400; 
 
 
 更新：以下代码已更新，以回应评论中的后续问题。 
 
 我已将细胞封入另一个div中。 这个div在容器内。 我们不是操纵第一个单元格的左边距，而是操纵这些单元格所在的div的左边距。 给这一点 - 我已经尝试过并获得了预期的结果。 
 
<style type="text/css">
  div#container { width:200px;height:200px;overflow:hidden; }
  div.cells { width:600px;height:200px;}
  div.cell { float:left;width:200px;height:200px;margin:0;padding:0; }
  div.cell p {margin:0;padding:0;}
</style>

<ul>
  <li><a href="#" class="box-mover">Show Box 1</a></li>
  <li><a href="#" class="box-mover">Show Box 2</a></li>
  <li><a href="#" class="box-mover">Show Box 3</a></li>
</ul>

<div id="container">
  <div class="cells">
    <div class="cell" style="background:#f1f1f1;">
      <p>Cell 1</p>
    </div>
    <div class="cell" style="background:#cc0000;color:#ffffff;">
      <p>Cell 2</p>
    </div>
    <div class="cell" style="background:#f1f1f1;">
      <p>Cell 3</p>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function(){

    $("a.box-mover:eq(0)").click(function(event){
      event.preventDefault();
      $("div.cells").animate({"marginLeft": "0px"}, "slow");
    });
    $("a.box-mover:eq(1)").click(function(event){
      event.preventDefault();
      $("div.cells").animate({"marginLeft": "-200px"}, "slow");
    });
    $("a.box-mover:eq(2)").click(function(event){
      event.preventDefault();
      $("div.cells").animate({"marginLeft": "-400px"}, "slow");
    });

  });
</script>

Use the .animate() method on the margins of the first Child-Cell.
 
Class "cell" consists of 200x200 boxes, all floated left. ID "container" is also 200x200, with an overflow of hidden. You could assign three links to animate the margin-left of the first div having the class "cell," which would move all three left or right, depending on the amount you want.
 
Link1 -> First Div Margin Left = 0;
 Link2 -> First Div Margin Left = -200;
 Link3 -> First Div Margin Left = - 400;
 
 
Update: The following code has been updated in response to follow up questions within the comments.
 
I've enclosed the cells within another div. This div is within the container. Rather than manipulating the left-margin of the first cell, we're going to manipulate the left-margin of the div that these cells reside within. Give this a shot - I've tried it and Got the desired results.
 
<style type="text/css">
  div#container { width:200px;height:200px;overflow:hidden; }
  div.cells { width:600px;height:200px;}
  div.cell { float:left;width:200px;height:200px;margin:0;padding:0; }
  div.cell p {margin:0;padding:0;}
</style>

<ul>
  <li><a href="#" class="box-mover">Show Box 1</a></li>
  <li><a href="#" class="box-mover">Show Box 2</a></li>
  <li><a href="#" class="box-mover">Show Box 3</a></li>
</ul>

<div id="container">
  <div class="cells">
    <div class="cell" style="background:#f1f1f1;">
      <p>Cell 1</p>
    </div>
    <div class="cell" style="background:#cc0000;color:#ffffff;">
      <p>Cell 2</p>
    </div>
    <div class="cell" style="background:#f1f1f1;">
      <p>Cell 3</p>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function(){

    $("a.box-mover:eq(0)").click(function(event){
      event.preventDefault();
      $("div.cells").animate({"marginLeft": "0px"}, "slow");
    });
    $("a.box-mover:eq(1)").click(function(event){
      event.preventDefault();
      $("div.cells").animate({"marginLeft": "-200px"}, "slow");
    });
    $("a.box-mover:eq(2)").click(function(event){
      event.preventDefault();
      $("div.cells").animate({"marginLeft": "-400px"}, "slow");
    });

  });
</script>