Question

我已经尝试解决这个问题一个星期了，这似乎是基本的，所以也许我错过了一些东西。

我希望在屏幕（或其容器）上居中一个div，然后在其右侧插入第二个div，以便之后它们中的两个居中（每侧的空间相等）。

插入第二个div不是问题，但我需要将第一个块滑动到插入新块后的位置。
http://jsfiddle.net/rdbLbnw1/

.container {
   width:100%;
   text-align:center;
}

.inside {
   border:solid 1px black;
   width:100px;
   height:100px;
   display:inline-block;
}

$(document).ready(function() {
    $("#add").click(function() {
        $(".container").append("<div class='inside'></div>");
    });
});

<div class="container">
    <div class="inside"></div>
</div>
<input id="add" type="button" value="add"/>

我是否需要明确计算原始框的最终位置，然后设置动画，或者有更好的方法吗？

Answer 1

我喜欢你的问题所以决定写下这个：

$(document).ready(function() {
    var isInAction = false;
    var intNumOfBoxes = 1;
    var intMargin = 10;
    $containerWidth = $(".container").width();
    $insideWidth = $(".inside").width();
    $(".inside").css('margin-left',($containerWidth - $insideWidth - intMargin)/2 + 'px');
    $("#add").click(function() {
        if (!isInAction){
            isInAction = true;
            intNumOfBoxes +=1;
            $(".current").removeClass("current");
            $(".container").append("<div class='inside current'></div>");
            $('.inside').animate({
                'margin-left': '-=' + ($insideWidth + intMargin)/2 + 'px'
            }, 300, function () {
                $(".current").css('margin-left',($containerWidth + ((intNumOfBoxes - 2) * ($insideWidth + intMargin)))/2 + 'px');
                $(".current").fadeIn(500,function(){
                    isInAction = false;
                });
            });
        }
    });
});

还在CSS中添加此类：

.current {
    display:none;
}

除了intMargin之外，您无需更改JS代码中的变量。您可以更改此var以在框之间设置边距。

注意：此代码也适用于旧版浏览器，不需要支持transition等CSS3功能。

更新：一些错误，例如重复点击已修复。

<强> Check JSFiddle Demo

Answer 2

首先，我们只能为具有显式数值的内容设置动画，例如width，left或margin。我们不能像对齐那样制作动画（实际上使用相同的边距属性但隐含地，没关系）。因此，如果我们知道插入的div的宽度，只需将其添加到我们的容器中。

1）让我们的中心容器本身并添加过渡到它

.container {
    width: 102px; /* set explicit width; 102 - because of borders */
    margin: auto; /* set margin to 'auto' - that will centre the div */
    transition: width 0.5s;
}

2）然后在添加div时增加宽度

$(".container").width($(".container").width() + 102);

3）但是等等！如果我们将div添加到太窄的容器中，它将被添加到底部而不是右边。所以我们需要在之前将另一个容器设置为适当的宽度。

参见最后的例子on JSFiddle。

顺便说一下，当你使用inline-block时，从代码中删除所有换行符和制表符，因为它会在你的块之间产生空格。

插入内联元素并将动画向左移动

2 个答案: