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属性 top 和的左

好吧，问题是当一个（或两个）元素已经切换位置时（因为 barrejarPeces 函数将在不等待任何动画完成的情况下扰乱100次），顶部和左侧值赢了＆＃39 ;是正确的。

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

不要使用动画延迟（尝试在你的小提琴中设置为0而不是1000，你会发现它有效）

加密所有元素只需一次（参见我的example here，我改变了一些逻辑）

动画改变了div

1 个答案: