插入内联元素并向左移动以执行动画

Question

我已经试图解决这个问题一个星期了，但它似乎很基础，所以可能我错过了什么。

我想在屏幕（或其容器）上将一个div居中，然后插入第二个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"/>

我需要明确计算原始框将要停止的位置，然后进行动画处理，还是有更好的方法可以实现？

- Jeremy Miller

---

我建议看看使用Masonry。我已经用过很多次了，非常不错，可以创建你想要的效果。（你需要稍微调整一下，但是可行的） - Ruddy

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代码中的变量。您可以更改此变量以设置框之间的间距。

注意：此代码在旧版浏览器上也可以正常工作，无需支持CSS3功能，如transition。

更新：修复了一些重复点击等错误。

查看JSFiddle演示

- Moshtaf

---

我怀疑我需要明确计算边距。这正是我要找的，完美！ - Jeremy Miller

Answer 2

首先，我们只能对具有明确数值的事物进行动画处理，例如宽度、左侧或边距。我们无法对诸如对齐方式之类的事物进行动画处理（实际上使用相同的边距属性但隐式地，不要在意）。因此，如果我们知道插入的 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添加到太窄的容器中，它将被添加到底部而不是右侧。因此，在此之前，我们需要设置另一个适当宽度的容器。

请参见最终示例在JSFiddle上。

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

- Roman Bekkiev

---

+1 是因为它很简单，但我不是在寻找过渡效果...更像是幻灯片式的展示。 - Jeremy Miller