清除由相对定位创建的空白，并保持移动的对象不受影响

Clearing white space created by relative positioning and keeping the moved object unaffected

本文关键字：移动 不受影响 对象 空白 相对 定位 创建 清除      更新时间：2023-09-26

我有一个div，它放在页眉附近。当我点击它时，div会向下移动到页面的中心（我使用的是jquery animate函数）。

一旦div移动到页面的中心，我希望其他元素（放置在页眉附近的其他div）填充由于div移动到了页面的中心而留下的空白。

我已经成功地去除了空白，其他元素已经填充了空白。

主要问题是，在处理左侧空白时，现在位于中心的div也受到了影响！

单击第一个元素：http://jsfiddle.net/maven123/vpumfujd/3/

$(document).ready(function () {
    $(".icons").click(function () {
         var icon_position = $(this).offset();
        $(this).animate({
            left: (window.outerWidth / 2) - icon_position.left-400,
            top: (window.outerHeight / 2) - icon_position.top
        }, 1200, function () {
            $(this).css({
                position:"relative",
                marginLeft:"-100px"
            });
        });
    });
});

当然，它会受到您设置的负margin-left的影响；如果你不想这样，就不要设置边距，用另一种方法让剩下的元素向左移动。

我建议将长方体切换到绝对位置，将其移动到中间，并为其后面的下一个长方体设置margin-left动画，从100px变为0。

相关文章：