Question

我正在做一个象棋游戏。在那里，我想移动一个有效的元素，然后将它追加到新的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。 Here是我的页面，如果您点击典当上方的白色方块，您将看到问题所在。我尝试添加delay(1000)甚至是javascript setTimeout，但没有任何作品:(非常感谢您提前帮助！

Answer 1

尝试：

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

基本上你是相对地设置动画的位置，但是在动画完成之前你将它移动到一个新的位置，所以它现在相对于 new 位置而不是 old 之一。

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

此外，您需要在新位置重置您正在制作动画的属性。

这就是它移动两倍距离的原因。它只能制作64px的动画，但是你将它移动到距离64px的另一个正方形，相对来说它仍然位于64px之外。 64px + 64px = 128px。您需要在新位置重置效果。

Answer 2

你也可以采取这种方法，从当前的一点点后退：

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

这将它设置为64px以下（z-index将其置于检查器模式之上......我将在CSS中为所有部分执行此操作并将其删除）然后将其附加到单元格并动画回到一个0的底部位置。

这里的优点：这会在动画结束后立即将棋子移动到新单元格，最好是将来检查空格是否为空的事件（例如，在此处移动另一个棋子后快速点击）。

Answer 3

嗯，可选的回调参数正好适用于顺序处理的这种情况。只需稍加纠正：在cletus的代码示例中，$("p80")必须为$("#p80")。

jQuery animate（）和appendTo（）问题

3 个答案: