javascript - 动画改变div的位置

Question

好吧，我已经实现了一些 div 并且当我开始页面时我希望它们具有动画效果，但问题是有时一个 div 与另一个 div 重叠然后我看到一个空白区域.. . 我怎样才能避免这种情况？我正在这样做:

这就是我更改 div 的方式:

function swap(d1, d2){
var topaux, leftaux;
topaux = d1.css("top");
leftaux = d1.css("left");
    d1.animate({
        top: d2.css("top"),
        left: d2.css("left"),
    }, { duration: 1000, queue: false });
    d2.animate({
        top: topaux,
        left: leftaux,
    }, { duration: 1000, queue: false });
}

这就是我现在尝试做的方式，但是在尝试这个之后，我没有任何动画，所以我有这段代码并且它有效我的意思是 div 之间没有重叠......

    d1.css("top", d2.css("top"));
    d1.css("left", d2.css("left"));
    d2.css("top", topaux);
    d2.css("left", leftaux);

当我按如下方式改组 div 时，我调用此函数(交换):

function swapdivs(){
var i,r, c, d1, d2;
for (i = 1; i < 100; i++) {
    r = Math.floor((Math.random() * rows) + 1);
    c = Math.floor((Math.random() * columns) + 1);
    d1= $("#r"+r+"c"+c);
    r = Math.floor((Math.random() * rows) + 1);
    c=Math.floor((Math.random() * columns) + 1);
    d2 = $("#r"+r+"c"+c);
    swap(d1,d2);
}
}

这是 jfiddle 我缺少什么？

Answer 1

好的，现在我看到问题了。

在您的 barrejarPeces 函数中，您多次随机打乱所有元素 (100)

for (i = 1; i < 100; i++) {

在 interanvipeces 函数中，您尝试使用 1000ms 的动画切换 2 个不同元素的位置，计算它们的 css 属性 top 和左

好吧，问题是当一个(或两个)元素已经切换位置时(因为 barrejarPeces 函数将在不等待任何动画完成的情况下进行 100 次加扰)，top 和 left 值不会是正确的。

所以有两种可能的解决方案:

1. 不要使用动画延迟(尝试在你的 fiddle 中设置为 0 而不是 1000，你会发现它有效)
2. 打乱所有元素仅一次(参见我的example here，我在其中更改了一些逻辑)