javascript - 清除相对定位产生的空白并保持移动的对象不受影响

Question

我有一个放在标题附近的 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"
            });
        });
    });
});

Answer 1

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

我建议将框切换到绝对定位以将其移动到中间，并为它之后的下一个框设置 margin-left 的动画，从 100px 到 0。