javascript - 放大时如何将周围的元素推离屏幕？

Question

我试图在两列中创建一组元素，当您单击其中一个时，它应该展开并将所有其他元素推开。就像从 A 到 B。

A B

我明确地创建了两列然后填充它们。当您单击左栏中的一个元素时，它会展开，将其下方的内容向下推，而右侧的栏应该向右移动，以便它部分隐藏在屏幕之外。问题是上面的元素没有被推上去，右列被推到左列下方，然后被推到右。你可以在这里看到结果 JSFiddle .

奇怪的是右边的列开始向右移动一点，然后向下移动，最后向右移动结束。如果我没有明确地将右列设置为 left: 270px;，它将被推到下面。我试图通过设置 top: 5px; 来锁定它的 y 位置，但它一直被强制向下。我怎样才能使元素按我希望的方式移动？

HTML:

<div class="container">
    <span class="col left">
        <div class="elem">x</div>
        <div class="elem">x</div>
        <div class="elem">x</div>
    </span>
    <span class="col right">
        <div class="elem">x</div>
        <div class="elem">x</div>
        <div class="elem">x</div>
    </span>
</div>

CSS:

.container {
    position: absolute;
    background-color: red;
    height: 400px;
    width: 330px;
    overflow: hidden;
}

.elem {
    height: 60px;
    width: 150px;
    background-color: yellow;
    margin: 5px 5px;
    position: relative;
    transition: all 2s ease;    
}
.col{
    position: relative;
    display: inline-block;
    transition: all 2s ease;
}
.expand {
    height: 100px;
    width: 200px;
    margin: 10px 10px;
}
.push{
    left: 270px;
}

JS:

 $(".elem").click(function () {
        $(this).addClass("expand");
        $(".right").addClass("push");
    });

Answer 1

试一试:http://jsfiddle.net/RJ8Q3/12/

我删除了 .push css，添加了 white-space:nowrap;，添加了 vertical-align:top;，添加了类 .WithLarge 到容器并添加 margin-top:-20px; 到它。

margin-top 解决了过渡，is(":first-child") 解决了点击第一个元素。

Javascript

$(".elem").click(function () {
    $(this).toggleClass("expand");
    if (!$(this).is(":first-child"))
        $(this).parent().toggleClass("WithLarge");
});

CSS

.container {
    position: absolute;
    background-color: red;
    height: 400px;
    width: 330px;
    overflow: hidden;
    white-space:nowrap;
}

.col{
    position: relative;
    display: inline-block;
    transition: all 2s ease;
    vertical-align: top;
}
.WithLarge{
    margin-top:-20px;  
}