Question

I’m doing a chess game. In there, I want to move an element with effect and then append it to new div. Following is my code.

    //--> #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'

The problem is, it moves 2 square( equivalent to 128px) where I only did is 64px.
Here is my page and if you click the white square just above the pawn, you’ll see the problem.
I’ve tried adding delay(1000) and even javascript setTimeout but nothing works 🙁 Really appreciate your helps in advance!

Answer 1

Try:

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

Basically you’re animating the position relatively but you move the piece to a new location before the animation completes so it is now relative to the new location not the old one.

The above version doesn’t move the piece until the animation completes, which should solve the problem. animate() can be provided a callback to be called on completion of the effect.

Also, you need to reset the attribute you’re animating once it’s in the new location.

This is why it’s moving twice the distance. It’s only animating 64px but then you move it to another square which is 64px away and it’s still positioned 64px away in relative terms. 64px + 64px = 128px. You need to reset the effect in the new location.