動畫會更改div的位置

Question

好吧，我已經實現了一些divs ，當我啟動頁面時，我希望它們進行動畫處理，但是它們的作用是，有時一個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屬性的頂部和左側

好吧，問題是當一個（或兩個）元素已經在切換位置時（由於barrejarPeces函數將在不等待任何動畫結束的情況下進行100次加擾），因此上下值將不正確。

因此，有兩種可能的解決方案：

1. 不要使用動畫延遲（在小提琴中嘗試將其設置為0而不是1000，您會發現它可以正常工作）
2. 手忙腳亂的所有元素只有 一次 （見我的例子在這里 ，在這里我改變了一些邏輯）