0

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

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

它们在页面上并排：

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

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

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

这是我现在拥有的 jsFiddle：

http://jsfiddle.net/4s4v9/

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

更新：

我要问的似乎是不可能的。我可以在移除其他盒子后将剩余的盒子固定在适当的位置，然后为其运动设置动画吗？

4

2 回答 2

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/

于 2013-01-30T03:24:29.387 回答
0

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

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

position: relative;

设置所有子元素：

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

然后对元素执行淡出或隐藏：

$('#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 插件，当您删除任何元素时，动画将自动处理。

于 2013-01-30T03:07:49.010 回答