jQuery animate（）和appendTo（）问题

我在下国际象棋。在这里，我想移动一个有效的元素，然后将其附加到新的div中

    //--> #p70 is just ablove #p80
    //--> each square is 64px
    $('#p80').animate({bottom:'+=64px'},500); //--> move one square above
    $('#b70').append($('#p80')); //--> append the animated element to owner 'div'

问题是，它移动了2平方英寸（相当于128px），而我只移动了64px。 是我的页面，如果你点击棋子上方的白色方块，你就会看到问题。 我已经尝试添加了

delay（1000）

甚至javascript

setTimeout

，但没有任何效果：（非常感谢您提前提供的帮助！

尝试：

$("p80").animate({bottom: "+=64px"}, 500, function() {
  $(this).css("bottom", 0).appendTo("#b70");
});

基本上，您正在相对地设置位置动画，但在动画完成之前，您将工件移动到一个新位置，因此它现在相对于新位置，而不是旧位置

在动画完成之前，上述版本不会移动片段，这应该可以解决问题。

animate（）

可以提供一个回调，在效果完成时调用

此外，一旦属性位于新位置，您需要重置正在设置动画的属性

---

这就是为什么它移动了两倍的距离。它只设置了64px的动画，但是你将它移动到另一个距离为64px的正方形上，它的相对位置仍然是64px。64px+64px=128px。你需要在新位置重置效果。

你也可以采用这种方法，稍微向后一点：

$('#b70').unbind().click(function(){        
  $('#p80').css({bottom: '-64px', zIndex: 1})
           .appendTo($('#b70')).animate({bottom:'0px'},500);
});

这会将其设置为下方的

64px

（z-index将其放置在棋盘格图案上方…我会在CSS中对所有碎片执行此操作，并在此处将其删除），然后将其附加到单元格并将其动画设置回底部的0位置

---

此处的优点：当动画稍后完成时，这会立即将片段移动到新单元，最适合于检查空间是否为空的未来事件（例如，快速单击此处移动的另一个片段）