изображения скользят непрерывно с <table>и jQuery

Question

Я пытаюсь написать небольшую тестовую страницу, которая распространяет изображения через окно (см. Изображение). У меня есть цветные коробки внутри таблицы (серая рамка), каждая из которых является элементом.

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

Эффект, к которому я стремлюсь, представляет собой бесконечный цикл справа налево, такой, что когда правый край окна покидает левый край окна (черная жирная линия), он затем добавляется к концу таблицы для сохранения собирается. Добавление легко с jQuery:

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

Я пытаюсь выяснить 2 вещи: 1. как иметь непрерывное движение справа налево на столе (jQuery.animate?) 2. как постоянно контролировать правый край ведущей коробки, возможно, с помощью

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');
}

спасибо.

Answer 1

http://www.htmldrive.net/items/show/356/Simple-jQuery-Spy-rolling-Effect

это может вам помочь

Answer 2

Я бы не использовал таблицы, поскольку у этого дизайна есть хотя бы один недостаток мэра.

Когда вы удаляете зеленую ячейку, все остальные ячейки будут «прыгать» влево на одну ячейку. В этом примере синий приземлится там, где был зеленый. Это должно быть компенсировано вашим движком анимации.

Вместо этого я бы предпочел использовать div или что-то подобное с абсолютным позиционированием. Таким образом, перемещение ячейки не повлияет на другие ячейки. Я думаю, что с помощью jQuery вы можете анимировать «левый» атрибут css и заставить его перемещаться за пределы окна. Прикрепите обратный вызов к этой анимации, и все готово, чтобы просто переместить его прямо в конец очереди.