Javascript-форум - Viewer: движение html-элемента

При загрузке страницы, генерируется viewer, список элементов c классом content_item . Мне надо показать на странице только первые пять элементов, поэтому я присваю им класс active , а остальным элементам присваеватся css-свойство display: none; . С помощью навигации я присваю/удаляю класс active элементам viewer и таким
образом пользователь может просматривать остальные элементы.

И вот тут начинается мой вопрос: как мне сделать так что бы элементы плавно уплывали в сторону, а остальные "паровозиком" тянулись за ним, до тех пор пока не покажутся (встанут в центре) все элементы с классом active ?

Я понимаю как анимировать сам элемент и задать ему так называемое "движение", но как при этом он должен изчезать при приближение к границе wrapper-а (указан жёлтой границей)? Ширина wrapper-а не должна же меняться.

Я не прошу писать за меня скрипт - я просто спрошиваю технологию. Куда копать мне копать?

<html>
  <head>
    <title>Views</title>
    <meta charset="UTF-8">
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  </head>
  <body>
    <style>
      .content {
        width: 300px;
        outline: 2px yellow solid;
        overflow: hidden;
        padding: 3px;
      }
      .content_item {
        float: left;
        width: 100px;
        text-align: center;
        display: none;
      }
      .content_item.active {
        display: inline-block;
        outline: 1px red solid;
      }
      ul {
        list-style: none;
      }
      li {
        outline: 1px blue solid;
        float: left;
        height: 20px;
        width: 20px;
        text-align: center;
        margin: 5px;
        cursor: pointer;
      }
      .row.active {
        background-color: gray;
      }
    </style>
    
    <div class="content">
      <div class="content_item content_item_0 active">1</div>
      <div class="content_item content_item_1 active">2</div>
      <div class="content_item content_item_2 active">3</div>
      <div class="content_item content_item_3 ">4</div>
      <div class="content_item content_item_4">5</div>
      <div class="content_item content_item_5">6</div>
      <div class="content_item content_item_6">7</div>
      <div class="content_item content_item_7">8</div>
      <div class="content_item content_item_8">9</div>
    </div>
    
    <div class="nav">
      <ul>
        <li class="row row_1 active">0</li>
        <li class="row row_2">1</li>
        <li class="row row_3">2</li>
      </ul>
    </div>
    
    <script>
      $( document ).ready(function() {
        var i_row_total_items = 3;
        $('.row').click(function(){
          var i_active_value = parseInt($(this).text());
          $('.nav .row').each(function(i){
            $(this).removeClass("active");
            if(i === i_active_value){
              $(this).addClass("active");
            }
          });
          $('.content_item').each(function(i){
            $(this).removeClass("active");
            if( (i >= i_row_total_items * i_active_value) && (i < i_row_total_items * (i_active_value+1) ) ){
              $(this).addClass("active");
            }
          });
        });
      });
    </script>
  </body>
</html>