jquery 테이블 요소의 슬라이딩 효과

Question

현재 내 사이트의 목록에 자동 스크롤 기능을 사용하고 있습니다.

그러나 목록의 첫 번째 항목이 사라지면 첫 번째 항목의 두 번째 종류의 '점프 위치'로 이동합니다. 두 번째 항목을 jquery의 위치로 슬라이드시킬 수 있는지 알고 싶습니다. 어떻게 할 수 있습니까? 다음은 자바 스크립트 코드와 html입니다. 사전에 도움을 주셔서 감사합니다.

자바 스크립트 :

<script> 
    var $target=$("tr.latest_arr td.rotate:first"); 
    $target.animate({ 
     marginLeft: -200, 
     opacity: 0, 
    }, function(){ 
     $target.css({ 
      marginLeft: 200 
     }).appendTo('tr.latest_arr').animate({ 
      marginLeft: 0, 
      opacity: 1 
     }) 
    }); 
},5000); 
    </script> 

HTML (샘플) 생성 :

<table> 
    <tr class="latest_arr"> 
     <td class="rotate" style="float:left;width:200px">Item 1</td> 
     <td class="rotate" style="float:left;width:200px">Item 2</td> 
     <td class="rotate" style="float:left;width:200px">Item 3</td> 
     <td class="rotate" style="float:left;width:200px">Item 4</td> 
     <td class="rotate" style="float:left;width:200px">Item 5</td> 
      ... 
      ... 
      ... 
    </tr> 
</table> 

나는 목록이 작업을 수행 할 수 있었다하지만 난 테이블 요소에 태그를 전환 할 때 변경됩니다.

이

http://jsbin.com/welcome/53677

어떤 도움이 크게 감사합니다 :

http://jsfiddle.net/fxHAe/

이 내가뿐만 테이블 형태로 찾고 있어요 무엇 :

이

내가 지금 직면하고있는 무슨이다 . 감사.

Answer 1

결과는 내가 이런 식

var ad_refresh=setInterval(function(){ 
    var $target=$("ul.latest_arr li.rotate:first"); 
    $target.animate({ 
     marginLeft: -200, 
     opacity: 0, 
    }, function(){ 
     $target.css({ 
      marginLeft: 200 
     }).appendTo('ul.latest_arr').animate({ 
      marginLeft: 0, 
      opacity: 1 
     }) 
    }); 
},1000);​ 

<ul class="latest_arr"> 
    <li class="rotate">foo1</li> 
    <li class="rotate">foo2</li> 
    <li class="rotate">foo3</li> 
    <li class="rotate">foo4</li> 
    <li class="rotate">foo5</li> 
</ul> 

     <style type="text/css"> 
     li{float:left} 
     </style>​ 

결과 here 그리고 당신은