Question

我有三个具有以下属性的div：

div.main-box {
    width: 100px;
    height: 100px;
    display: inline-block;
    padding: 20px;
    margin: 20px;
    border: 1px solid black;
}

他们在页面上并排：

 __  __  __
|__||__||__|

我根据用户互动一次删除其中两个（例如，用户点击第三个，前两个消失）。删除后，剩余的框移动到中心。

就像现在一样，这个盒子只是出现在中心。我想动画这个动作。

这是我现在拥有的jsFiddle：

http://jsfiddle.net/4s4v9/

我问的可能吗？谢谢你的帮助！

更新

我所要求的似乎不可能。在移除其他框并且然后为其移动设置动画后，我可以保留剩下的框吗？

Answer 1

你的意思是这样吗？

$('a#change-boxes').click(function () {
    var i = 1;
    $('div.main-box').each(function () {
        if (i <= 2) {
            $(this).hide(500, function(){
            $(this).remove();
            });
        }
        i++;
    });
});

点击此处：http://jsfiddle.net/GmaPE/

Answer 2

要制作动画内容，您需要一个可以操作的属性，例如“left”或“margin-left”。您可以在不进行定位的情况下为内联块或内联块元素设置动画。

尝试相对定位。设置父容器元素（如果您还没有，则添加一个）：

position: relative;

设置所有子元素：

position: absolute;
top: 0;
left: 0px; // 200px, 400px, etc. respectively

然后执行fadeOut或隐藏元素：

$('#selector-for-box-1-and-2')
.fadeOut('slow', function() {

})

然后在动画完成功能中添加动画：

$('#selector-for-box-1-and-2')
.fadeOut('slow', function() {
    $('#selector-for-box-3').animate({
        left: 0px
    }, 1000);
})

您还可以应用 jQuery.masonry 插件，删除任何元素时动画将自动处理。

使用jQuery动画内联块移动

更新

2 个答案: