單擊使用JQuery對表中的單元格進行動畫處理

Question

我正在嘗試使用JQuery在JavaScript中制作一個簡單的紙牌游戲。 在游戲的一部分中，您應該單擊由div （ tablica[i][j] ）組成的“表”（ tablica ）中的一行，以交換該行中的單元格（以將內容放入單元格中）在正確的列中）。 這是相關的代碼段：

for (var j=0; j<odgovor1.length; j++)
            for (var i=1; i<3; i++)
            {
                tablica[i][j]=document.createElement("div");
                tablica[i][j].setAttribute("class","rijecUDrugomDijelu");
                if (i===1) tablica[i][j].appendChild(document.createTextNode(odgovor1[j]));
                else if (i===2) tablica[i][j].appendChild(document.createTextNode(odgovor2[j]));
                tablica[i][j].style.top=228+27*j;
                tablica[i][j].style.left=-153+110+153*i;
                tablica[i][j].onclick=eval(
                        "(function()"+
                        "{"+
                        "var tmp=tablica[1]["+j+"].style.left;"+
                        "tablica[1]["+j+"].style.left=tablica[2]["+j+"].style.left;"+
                        "tablica[2]["+j+"].style.left=tmp;"+
                        "tmp=odgovor1["+j+"];"+
                        "odgovor1["+j+"]=odgovor2["+j+"];"+
                        "odgovor2["+j+"]=tmp;"+
                        "})"
                        );
                pozadina.appendChild(tablica[i][j]);
            }

當用戶單擊該表中的一行時，該行中的單元格將被交換，並且在字符串數組odgovor1和odgovor2正確跟蹤了表的內容。 但是，它們交換時沒有任何動畫，它們會立即交換。 當我嘗試將JQuery動畫應用於單元（ div ） tablica[1][j]和tablica[2][j] ，程序崩潰。 你知道該怎么做嗎？
再次向您保證，上面的代碼現在可以正常工作，但是當我嘗試使用JQuery動畫而不是簡單地交換屬性style.left ，它崩潰了。

Answer 1

使用對象屬性代替eval似乎可行：

for (var j=0; j<odgovor1.length; j++)
            for (var i=1; i<3; i++)
                    {
                    tablica[i][j]=document.createElement("div");
                    tablica[i][j].setAttribute("class","rijecUDrugomDijelu");
                    if (i===1) tablica[i][j].appendChild(document.createTextNode(odgovor1[j]));
                    else if (i===2) tablica[i][j].appendChild(document.createTextNode(odgovor2[j]));
                    tablica[i][j].style.top=228+27*j;
                    tablica[i][j].style.left=-153+110+153*i;
                    tablica[i][j].redak=j;
                    tablica[i][j].onclick=
                            function()
                            {
                            var tmp=tablica[1][this.redak].style.left;
                            $(tablica[1][this.redak]).animate({left:(tablica[2][this.redak].style.left)},500);
                            $(tablica[2][this.redak]).animate({left:(tmp)},500);
                            tmp=odgovor1[this.redak];
                            odgovor1[this.redak]=odgovor2[this.redak];
                            odgovor2[this.redak]=tmp;
                            }
                    pozadina.appendChild(tablica[i][j]);
                    }