images sliding continuously with <table> and jQuery

Question

Hi - I'm trying to write a little test page that circulates images through a window (see image). I have colored boxes inside a table (gray border), with each box being a element.

<table id="boxes" style="border: 1px solid #666;">
  <tr>
    <td><div class="box red"></div></td>
    <td><div class="box green"></div></td>
    <td><div class="box blue"></div></td>
    <td><div class="box yellow"></div></td>
    <td><div class="box pink"></div></td>
    <td><div class="box lightblue"></div></td>
  </tr>
</table>

The effect I'm going for is an endless right-to-left loop, such that when an box's right edge leaves the window's left edge (black bold line), it is then appended to the end of the table to keep going. The appending is easy with jQuery:

$('#boxes td:first').remove().appendTo('#boxes tr')

I'm trying to figure out 2 things: 1. how to have continuous motion right-to-left on the table (jQuery.animate?) 2. how to constantly monitor the right edge of the leading box, possibly with

var tableEdge = $('#boxes').position().left;
var boxEdge = $('#boxes td:first').position().left + $('#boxes td:first').width();

if ( boxEdge < tableEdge ) { 
  $('#boxes td:first').remove().appendTo('#boxes tr');
}

thanks.

Answer 1

I would not use tables, since there is at least one mayor drawback with this design.

When you remove the green cell, all other cells will "jump" to the left one cell. In the example, the blue one would land where the green one was. This would have to be compensated for by your animation engine.

Instead, I would preferably use divs or such with absolute positioning. This way, moving a cell will not affect the other cells. With jQuery I think you can animate the "left" css attribute, and make it move to just outside the window. Attach a callback to this animation and you're all set to just move it right to the back of the queue.