JQuery Rotating List

Question

I'm trying to rotate a list of items (ie: ) in a table. What i'm trying to do is to have the first item removed and an item added at the end of the table. I'm able to get the first item removed but i'm stuck at how i can constantly redo this every 10 sec. Perhaps, looking at the code will give a better idea.

code:

        $num_ads = 0;
        if (isset($ads[0])) {
            foreach($ads as $row) {
                                    ...
                                    ...
                echo '<td class="featured_ads_td" id="featured_'.$num_ads.'">';
                                    ...
                                    ...
                                    $num_ads++
                            }
                    }

So what i've done is that i gave each of the item in the table a unique id. In this case first item will be featured_0, followed by featured_1, featured_2..etc

Javascript

<script src="/jquery-latest.min.js"></script>
<script type="text/javascript">
        var ad_refresh = setInterval(function(){
            $('#featured_0').fadeOut('slow');
            $('#featured_0').attr('id','removed');
        }2000);
</script>

Using this script below will remove my first item. But is there anyway how i can make the first item featured_0 so i can recurse this every 2secs? Or if there is a better way of doing this, please do let me know. My knowledge of javascript and jquery is still very limited.

Thanks for the help.

Answer 1

@Lawrance, you could do something like this: http://jsfiddle.net/estevao_lucas/usXba/

The only thing that I did was clone and remove the first element and then append to table again.

Answer 2

If I did understood your question properly, something along this lines will allow you to fadeOut the element and place it after the remaining ones:

See this working Fiddle Example!

jQuery

var ad_refresh = setInterval(function(){
    var $target = $('.featured_ads_td:first-child');
    $target.fadeOut('slow', function() {
        $target.appendTo('tr').show();
    });
},2000);