Jquery code for adding/deleting/scrolling list items behaving very strange -

this piece of code that's in charge of scrolling vertical list of items.

<script type="text/javascript"> $(document).ready(function(){      var first = 0;     var speed = 700;     var pause = 8000;          function removefirst(){             first = $('ul#twitter_update_list li:first').html();             $('ul#twitter_update_list li:first')             .animate({opacity: 0}, speed)             .fadeout('slow', function() {$(this).remove();});             addlast(first);         }          function addlast(first){             last = '<li style="display:none">'+first+'</li>';             $('ul#twitter_update_list').append(last)             $('ul#twitter_update_list li:last')             .animate({opacity: 1}, speed)             .fadein('slow')         }      interval = setinterval(removefirst, pause); }); </script> 

at first glance, seems work flawlessly. after 10 minutes, list items start add (as if they're not getting deleted). after 15 minutes, there's 30 of list items (initially, there 5).

the content being inserted in ajax once, @ document load. don't think relevant didn't include code.

these 2 lines:

.fadeout('slow', function() {$(this).remove();}); addlast(first); 

run asynchronously. new nodes added faster previous first 1 removed.

move addlast(), so:

.fadeout('slow', function() { $(this).remove(); addlast(first); }); 

and work.

see in action @ jsfiddle.