jquery Раздвижные эффекты для элементов таблицы

Question

В настоящее время я выполняю функцию автоматического прокрутки для списка на моем сайте.

Однако после того, как первый элемент в списке исчезнет, ​​второй вид «прыжок в позицию» первого элемента. Что я хочу знать, возможно ли сделать второй элемент в позиции jquery и как я могу это сделать? Ниже приведен код javascript и html. Спасибо за любую помощь заранее.

Javascript:

<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://jsfiddle.net/fxHAe/

Это то, что я ищу, но в виде таблицы:

http://jsbin.com/welcome/53677

Любая помощь будет принята с благодарностью , Благодарю.

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 результаты И конечно меняющийся уль ширины CSS, как вы хотите, будет работать лучше для вашего случая