Question

我想在序言中说这是我的第一篇文章，但绝对是这些论坛的长期读者，所以要善待。

我正在使用的是什么：

jQuery和Bootstrap 3

我想要完成的事情

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

淡出或隐藏其他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

所以这就是我使用bootstrap for framework和使用jquery进行动画所能完成的事情（我后来会看到添加揭示另一个容器，因为我很清楚它是如何工作的）我感谢所有的评论，并努力提供帮助！这是我的最终结果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 2

我已经准备好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 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

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

4 个答案: