title: Animating Prepend and Append with floats
body: <p>This seems really straightforward but I'm having the worst time of it.  I have the following code working on the following divs.  Would love to animate the slider so that it looks like its gradually advancing forward, but when I use <code>.animate()</code> on <code>$(".person")</code> the items animate, and then the extra div is appended and everything ends up advancing more than I want it to.  My goal is to make the slider gradually advance the width of one of the images, which is 12.5%</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="people-reel"&gt;
      &lt;div class="person" id="alex"&gt;&lt;/div&gt;&lt;!-- end #alex --&gt;
      &lt;div class="person" id="jenna"&gt;&lt;/div&gt;&lt;!-- end #jenna --&gt;
      &lt;div class="person" id="martha"&gt;&lt;/div&gt;&lt;!-- end #martha --&gt;
      &lt;div class="person" id="matt"&gt;&lt;/div&gt;&lt;!-- end #matt --&gt;
      &lt;div class="person" id="mia"&gt;&lt;/div&gt;&lt;!-- end #mia --&gt;
      &lt;div class="person" id="rich"&gt;&lt;/div&gt;&lt;!-- end #rich --&gt;
      &lt;div class="person" id="ryan"&gt;&lt;/div&gt;&lt;!-- end #ryan --&gt;
      &lt;div class="person" id="silvia"&gt;&lt;/div&gt;&lt;!-- end #silvia --&gt;
      &lt;div class="person" id="tony"&gt;&lt;/div&gt;&lt;!-- end #tony --&gt;
  &lt;/div&gt;&lt;!-- end #people-reel --&gt;
  &lt;div class="controller" id="left-controller"&gt;&lt;/div&gt;&lt;!-- end #left-controller --&gt;
  &lt;div class="controller" id="right-controller"&gt;&lt;/div&gt;&lt;!-- end #left-controller --&gt;
  </code></pre>
  
  <p><strong>CSS:</strong> </p>
  
  <pre><code>#people-reel {
      width: 120%;
      left: -10%;
      background: rgba(255,255,255,0.3);
      height: 200px;
      position: absolute;
      bottom: 15%;
      overflow: hidden;
      -webkit-transition: all 0.5s ease-in;
      -moz-transition: all 0.5s ease-in;
      -o-transition: all 0.5s ease-in;
      transition: all 0.5s ease-in;
  }
  
  #alex {background-image: url('img/our-team/alex.jpg');}
  #jenna {background-image: url('img/our-team/jenna.jpg');}
  #martha {background-image: url('img/our-team/martha.jpg');}
  #matt {background-image: url('img/our-team/matt.jpg');}
  #mia {background-image: url('img/our-team/mia.jpg');}
  #rich {background-image: url('img/our-team/rich.jpg');}
  #ryan {background-image: url('img/our-team/ryan.jpg');}
  #silvia {background-image: url('img/our-team/silvia.jpg');}
  #tony {background-image: url('img/our-team/tony.jpg');}
  
  .person {
      height: 200px;
      width: 12.5%;
      background-image: url('img/our-team/mia.jpg');
      background-size: cover;
      background-position: center;
      float: left;
      display: inline-block;
      cursor: pointer;
      -webkit-transition: all 0.5s ease-in;
      -moz-transition: all 0.5s ease-in;
      -o-transition: all 0.5s ease-in;
      transition: all 0.5s ease-in;
  }
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>function moveToLeft(){
      $("#left-controller").on("click", function(){       
          var firstElement = $(".person").first();
          $("#people-reel").append(firstElement);
      });
  }
  function moveToRight(){
      $("#right-controller").on("click", function(){      
          var firstElement = $(".person").last();
          $("#people-reel").prepend(firstElement);
      });
  }
  
  moveToLeft();
  moveToRight();
  </code></pre>