jquery - 使用 jQuery 动画内联 block 移动

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/