单击图像，隐藏其他图像和动画图像滑动 JQUERY

Question

只是想先说一下我的第一个 post，但这些论坛肯定已经很长时间了 reader，所以请多多关照。

我在用什么：

jQuery 和 Bootstrap 3

我想要完成的事情

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

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

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

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

Edit2：这是我为其他任何人尝试的最终解决方案（没有显示 div 功能，但不要认为它会太难做。如果我有机会第二天左右我会 post 完成后。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

尝试使用网络动画API

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

Answer 2

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

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

Answer 3

这就是我通过使用 bootstrap 框架和使用 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 4

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

我的解决方案一步一步:

HTML:

我在最后一个玩家之后添加了 .content 容器（使用 .clearfix 将其保存在所有容器下，并带有一些 bootstrap 网格 classes）

<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 class）：

#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());

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

单击图像，隐藏其他图像和动画图像滑动 JQUERY

Click image, hide other images and animate image sliding with JQUERY

html

javascript

css

jquery

twitter-bootstrap