jQuery animate () и appendTo () проблема

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 квадрата (что эквивалентно 128 пикселям), где я только что сделал это 64 пикселя. Здесь - моя страница, и если вы нажмете на белый квадрат чуть выше пешки, вы увидите проблему. Я пытался добавить delay(1000) и даже javascript setTimeout, но ничего не работает :( Очень ценю вашу помощь заранее!

Answer 1

Попробуйте:

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

По существу, вы анимируете позицию относительно, но перед тем, как анимация завершится, вы перемещаете фигуру в новое место, поэтому теперь она относится к новой локации, а не к старой .

Приведенная выше версия не перемещает фигуру, пока анимация не завершится, что должно решить проблему. animate() может быть предоставлен обратный вызов для вызова после завершения эффекта.

Кроме того, вам нужно сбросить атрибут, который вы анимируете, когда он окажется в новом месте.

Вот почему он движется вдвое дальше. Это только анимация 64px, но затем вы перемещаете его в другой квадрат, который находится на расстоянии 64px, и он все еще располагается на расстоянии 64px в относительном выражении. 64px + 64px = 128 пикселей Вам нужно сбросить эффект в новом месте.

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").