title: Click image, hide other images and animate image sliding with JQUERY
body: <p>Just want to preface by saying this my first post, but definitely a long time reader of these forums, so be kind.</p>
  
  <p>What I'm using:</p>
  
  <p>jQuery and Bootstrap 3</p>
  
  <p>What I'm trying to accomplish</p>
  
  <p>I have 5 images centered in a row. I want to be able to click one of the images and have the following happen:</p>
  
  <p>fadeOut or hide the other 4 images, slide the remaining image to the far left of the row and slide into view another div to use as a container for other content.(I was able to get the code working that changes the content based on image click, just need help with the animation portion).</p>
  
  <p>Here's my JSFiddle for what I've been able to accomplish. Any help outside this question (code etiquette etc.) is appreciated. Only been doing this about 3 months or so now, but having a blast. Still getting use to some lingo so explaining like I'm 5 is ok.</p>
  
  <p>Edit 1: <a href="http://jsfiddle.net/eps7tpyd/" rel="nofollow">http://jsfiddle.net/eps7tpyd/</a> Here's something even closer, but the animation for the divs moving to the right seems to only happen for the 1st one and I suspect it's because it's class is the only one changing. The other divs don't require a class change to move left. Because the other ones get hidden, they move all the way left in the bootstrap row.</p>
  
  <p>Edit2: Here's my final solution for anyone else trying (doesn't have the reveal div functionality, but don't think it'll be too hard to do. If I get a chance in the next day or so I'll post it up when I'm done. <a href="http://jsfiddle.net/8g9tL5zw/" rel="nofollow">http://jsfiddle.net/8g9tL5zw/</a></p>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>$(document).ready(function () {
      $('div.container2').hide();
      $('div.roster').click(function () {
          if ($(this).hasClass("offset")) {
              $(this).toggleClass("col-xs-offset-1");
              $('div.roster').not(this).fadeToggle();
              $('div.container2').toggle();
          } else {
              $('div.roster').not(this).fadeToggle();
              $('div.container2').toggle();
          }
      });
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;section class="container"&gt;
      &lt;article class="row roster"&gt;
          &lt;div class="col-xs-2 col-xs-offset-1 roster offset"&gt;
              &lt;img src="http://dummyimage.com/308x560/000/fff" class="img-responsive player" /&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-2 roster"&gt;
              &lt;img src="http://dummyimage.com/308x560/0000ff/000" class="img-responsive player" /&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-2 roster"&gt;
              &lt;img src="http://dummyimage.com/308x560/800080/000" class="img-responsive player" /&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-2 roster"&gt;
              &lt;img src="http://dummyimage.com/308x560/008000/000" class="img-responsive player" /&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-2 roster"&gt;
              &lt;img src="http://dummyimage.com/308x560/ffff00/000" class="img-responsive player" /&gt;
          &lt;/div&gt;
          &lt;div class="container2"&gt;TEST&lt;/div&gt;
      &lt;/article&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.container {
      width: 95%;
      margin-top: 15px;
  }
  article .roster {
      overflow: hidden;
      -webkit-transition: width 0.1s ease, margin 0.1s ease;
      -moz-transition: width 0.1s ease, margin 0.1s ease;
      -o-transition: width 0.1s ease, margin 0.1s ease;
       transition: width 0.1s ease, margin 0.1s ease;
  }
  .player-info {
       display: inline-block;
       color: blue;
       width: 80%;
       height: 400px;
       position: relative;
       z-index: -1;
       background-color: red;
  }
  </code></pre>