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（）問題

回答

相關問題