jquery - 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平方（相当于128像素），而我只做了64像素。
Here是我的页面，如果您单击典当上方的白色方块，则会看到问题。
我尝试添加delay(1000)甚至javascript setTimeout，但是没有任何效果:(真的感谢您的帮助！

最佳答案

尝试：

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

基本上，您是在相对位置上设置动画，但是在动画完成之前将作品移动到新位置，因此现在它是相对于新位置而不是旧位置。

在动画完成之前，上述版本不会移动片段，这应该可以解决问题。可以提供animate()一个回调，以在效果完成时调用。

另外，一旦将要设置动画的属性放在新位置，就需要对其进行重置。

这就是为什么它移动两倍的距离的原因。它只设置了64px的动画，但随后将其移动到距离64px的另一个正方形，并且相对而言，它仍然定位在64px之外。 64px + 64px = 128px。您需要在新位置重置效果。