Issues moving an image using jQuery

So I have a puzzle page, which you can see here In this case (mate in 3), every time you make a correct move, the server responds back with the next move. Right now, it does so by simply removing the contents of the cell and writing it to the new square. Crude, but it's worked.

I hate it! I would prefer if the server responds by sliding the piece to the new square. So I came up with the following jQuery example. I have a piece in a div and I'm sliding that div a set amount. Obviously this is just a test. The main problem is that the piece is in a div and just floats on top of the table. Therefore, when it gets to one or the other end, you'll notice that it's not centered within the table div. It's off slightly. I was thinking about at the end of the animation quickly erasing and rewriting the div in the table cell, thus centering it. However, I don't think it should be this hard. Any ideas what I'm doing wrong? Thanks in advance.

Why are you moving it 47px at a time? Wouldn't 43px make more sense, since the width of each cell is 42px and they have a 1px border between them?

What I might do is not keep the pieces in the cells at all. I might absolutely position them on top of the table and that way you can calculate their positions form a common fixed point instead of from where each started the way you'd be doing using relative positioning.

Also I recommend you consider setting the cursor property for the pieces, so that it's more obvious you can click on them.

Well that's the thing. Since I'm moving it 47px at a time and the image is only 42px wide and the squares are 42px, there's something off. I just can't see what. I could, for each square, store a coordinate. So when it's time for me to move a piece to, a5, for example, I know exactly the coordinates for that square. I can do that whether positioning the piece relatively or absolutely. This potentially brings up another issue. The positions look great in these three browsers, but for these two browsers you have to adjust your coordinates ever so slightly. For these mobile browsers, the coordinates are all off and I can easily see myself having coordinates for each square and for various browsers. Every time a new browser comes out, it'll be up to me to get my hands on it and confirm that the coordinates work.

If the image itself without the div was in the cell, then there would be no issues. That's what I do now. I cut the image out of the cell and write it to the new location. As a compromise, what I might do is animate it being cut out. A slow fade maybe. But it would be nice to have a clean solution for this issue.

Huh? It sounds like you have a reason but you haven't made it clear what it is. Please be specific about which browsers you are talking about.

Are you perhaps referring to a gap under the images appearing in some browsers?
That mysterious gap under images
Images, Tables, and Mysterious Gaps

If that's not it, then I suggest you try using "table-layout:fixed".

Sorry for not being clear. So here's the deal. Right now I've set each square to 42px. The border for each cell is 1px wide. So logically, moving the piece 43px each time should recenter things, correct? However, if you start moving the image to the right, you'll notice that by the end, it's off.

However, as I'm talking to you I think I see the issue. I'm setting the square to 42 pixels, but I'd say each square is more like 46 pixes. Let me see if I can get it to actually be 42pixels and if that will help.

Oh. Yeah, I see what you mean. Try setting the width and height of the table to 344px. The larger width and height were causing the table cells to be stretched bigger than their set dimensions.

Ok, I locked the table down so that each square is 43px (gave an extra pixel to give it some room) and I now move it 43 pixels each time. It looks pretty good in Safari and Chrome on a Mac and my Safari browser on my iPhone. I guess you have no choice but to float the image over the board. Technically I could move the piece, then at the end of the animation quickly write it into the current td to make sure it's perfectly centered every time. Maybe I'll try that and see what that looks like.