이미지가 <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와 함께 쉽게 : 1. 어떻게 테이블에 왼쪽 오른쪽에 연속 모션을 가지고 2. 방법 (jQuery.animate을?) : 나는이 일을 알아 내려고 노력하고있어

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

선도 상자의 오른쪽 가장자리를 지속적으로 모니터링하십시오.

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

감사합니다. 이 디자인 적어도 하나의 시장 단점이 있으므로

boxes http://i34.tinypic.com/30dgztf.png

Answer 1

나는 테이블을 사용하지 않을 것입니다.

녹색 셀을 제거하면 다른 모든 셀이 왼쪽 하나의 셀로 "이동"합니다. 예를 들어 파란 사람은 녹색 사람이 있던 곳으로 갈 것입니다. 이것은 애니메이션 엔진에 의해 보상되어야합니다.

대신 div 또는 절대 위치 지정을 사용하는 것이 좋습니다. 이렇게하면 세포를 움직이면 다른 세포에는 영향을 미치지 않습니다. jQuery를 사용하면 "왼쪽"CSS 특성을 애니메이션화하여 창 외부로 이동할 수 있다고 생각합니다. 이 애니메이션에 콜백을 연결하면 모든 것을 바로 대기열 뒤로 이동할 수 있습니다.

Answer 2

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

이것은 당신이