jQuery animate（）和appendTo（）问题

我正在做一个象棋游戏。在那里，我想要移动一个有效的元素，然后将它添加到新的div。以下是我的代码。jQuery animate（）和appendTo（）问题

//--> #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像素）其中，I，只做为64PX。 Here是我的页面，如果您点击棋子上方的白色方块，就会看到问题。我已经尝试添加delay(1000)甚至JavaScript的setTimeout但没有任何工程:(非常感谢您的帮助提前

来源

2010-03-28 Devyn

尝试：

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

基本上你比较动画的位置，但你移动一块动画之前新的位置完成，因此现在是相对于新位置不是老之一。

上述版本不动这块unti l动画完成，这应该解决问题。 animate()可以提供回调以在完成效果时调用。

此外，你需要重新设置你的动画，一旦它在新位置的属性。

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

来源

2010-03-28 13:30:27 cletus

完美的答案。你救了我的命：） – Devyn 2010-03-28 13:43:04

您也可以采取这种做法，有点向后从电流：

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

这台下面就64px（z-index的地方它的棋盘格图案上面......我会做到这一点的CSS中所有作品并将其删除）然后将其附加到单元格，然后回到0底部位置。

这里的优势：这（例如后快速点击另一块搬到这里）立即移至一块新的电池，而动画后完成，最适用于检查未来事件如果空间是空的。

来源

2010-03-28 13:38:53

好了，可选的回调参数是完全的顺序处理这些situtions。只是一点点更正：在Cletus的代码示例中，$("p80")必须是$("#p80")。

来源

2010-03-28 13:43:42 efi

jQuery animate（）和appendTo（）问题

回答

相关问题