单击图像，隐藏其他图像并使用 JQUERY 动画图像滑动

Question

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

我正在使用什么：

jQuery 和 Bootstrap 3

我正在努力完成的事情

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

fadeOut 或隐藏其他 4 个图像，将剩余图像滑到行的最左侧，然后滑入另一个 div 以用作其他内容的容器。（我能够使更改内容的代码正常工作基于图片点击，只需要动画部分的帮助。

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

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

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

JQUERY

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

Answer 1

我已经准备好扩展您的解决方案的 jsfiddle 并希望 that's what You wanted

我的解决方案一步一步：

HTML：

我在最后一个播放器之后添加了.content 容器（使用.clearfix 将其保留在所有容器下并带有一些引导网格类）

<br class="clearfix" />
<div class="col-xs-8 col-xs-offset-3 content"></div>

在每个播放器之后我也为这个播放器添加了内容（简单的文本和图像）

<div id="content3">
    This is the content for player 3<br/>
    <img src="http://lorempixel.com/400/200/" alt=""/>
</div>

CSS：

我使用 CSS：

.content {
    background: #dadada;
    height: 286px;
    position: absolute; // to keep it over players from 2 to 5
    top: 0;
    display: none; // hide for start
}

我已经更新了你的两个 CSS 片段，如下所示（只需添加 .content 类）：

#player2-col, #player3-col, #player4-col, #player5-col, .content {
    transition: transform .5s linear;
    -webkit-transition: transform .5s ease;
}

#player1, #player2, #player3, #player4, #player5, .content {
    transition: transform .7s ease;
}

当然还有在开始时隐藏播放器的内容：

[id^="content"] {
    display: none;
} 

JS： 在 JavaScript 中，我添加了一个局部变量 ($parentDiv) 仅用于优化，以及两行代码：

// toggle element after each player click
$('.content').toggle("drop"); 

// update main content container with content for specific player
$('.content').html($parentDiv.find('[id^="content"]').html()); 

就是这样。希望它会有所帮助:)

Answer 2

这就是我通过使用 bootstrap 框架和使用 jquery 动画能够完成的（我稍后会考虑添加显示另一个容器，因为我很好地掌握了它是如何工作的）我感谢所有 cmets并试图提供帮助！这是我的最终结果http://jsfiddle.net/8g9tL5zw/

$('.portrait').on('click' , function(){
$('.portrait').not(this).toggle("drop");

if($(this).parent('div').is('#player2-col')){
$(this).parent('div').toggleClass("move-player2");
} 
else if ($(this).parent('div').is('#player3-col')){
$(this).parent('div').toggleClass("move-player3");
}
else if ($(this).parent('div').is('#player4-col')){
$(this).parent('div').toggleClass("move-player4");
}
else if ($(this).parent('div').is('#player5-col')){
$(this).parent('div').toggleClass("move-player5");
}
});

Answer 3

尝试使用网络动画 API

最简单的参考：http://updates.html5rocks.com/2014/05/Web-Animations---element-animate-is-now-in-Chrome-36

Answer 4

从您的示例看来，您想通过过滤器选项隐藏和显示项目元素。隐藏与所选项目不匹配的项目将被隐藏。同位素将是最好的解决方案http://isotope.metafizzy.co/filtering.html。我会选择 fitRows 选项，因为它非常适合具有相同高度的项目。这个新功能的最大优势是消除了我们为达到预期结果而必须经历的许多尴尬的箍和测试。 Isotopy 提供丝般流畅的动画效果。

有关安装的最佳分步帮助，请查看http://bootstrapwp.com/?ref=14