Hi! 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!