单击图像，隐藏其他图像并使用JQUERY对图像滑动进行动画处理

只是想先说这是我的第一篇文章，但绝对是这些论坛的长期读者，所以要善良。

我正在使用什么：

jQuery 和 Bootstrap 3

我想要完成什么

我有 5 张图像居中。我希望能够单击其中一个图像并发生以下情况：

淡出或隐藏其他 4 张图像，将剩余图像滑动到行的最左侧，然后滑入另一个div 以用作其他内容的容器。（我能够让代码根据图像点击更改内容，只需要动画部分的帮助）。

这是我能够完成的JSFiddle。感谢这个问题以外的任何帮助（代码礼仪等）。现在只做了大约 3 个月左右，但玩得很开心。仍然习惯一些术语，所以像我 5 岁一样解释是可以的。

编辑 1：http://jsfiddle.net/eps7tpyd/这里有一些更接近的东西，但是向右移动的div 的动画似乎只发生在第一个，我怀疑这是因为它的类是唯一改变的。其他div 不需要更改类即可向左移动。因为其他的被隐藏了，所以它们在引导行中一直向左移动。

Edit2：这是我对其他尝试的人的最终解决方案（没有揭示div功能，但不要认为这太难做到。如果我在第二天左右有机会，我会在完成后发布它。http://jsfiddle.net/8g9tL5zw/

简讯

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

.HTML

<section class="container">
    <article class="row roster">
        <div class="col-xs-2 col-xs-offset-1 roster offset">
            <img src="http://dummyimage.com/308x560/000/fff" class="img-responsive player" />
        </div>
        <div class="col-xs-2 roster">
            <img src="http://dummyimage.com/308x560/0000ff/000" class="img-responsive player" />
        </div>
        <div class="col-xs-2 roster">
            <img src="http://dummyimage.com/308x560/800080/000" class="img-responsive player" />
        </div>
        <div class="col-xs-2 roster">
            <img src="http://dummyimage.com/308x560/008000/000" class="img-responsive player" />
        </div>
        <div class="col-xs-2 roster">
            <img src="http://dummyimage.com/308x560/ffff00/000" class="img-responsive player" />
        </div>
        <div class="container2">TEST</div>
    </article>
</section>

.CSS

.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;
}