Problem Shuffling a List (Vertical News Ticker concept)

Problem Shuffling a List (Vertical News Ticker concept)

I am writing my own vertical scrolling news ticker as I can't find one I like. The basic functionality is:

  • Get the first item in a container (like a UL) and store it temporarily
  • Remove it.
  • Add the removed item to the bottom of the list.

  • Slide the rest of the list upwards.
In the example below, a UL is the target container. Each LI in the UL is removed in turn, added to the bottom and the whole thing works pretty good. Except in Internet Explorer 7 (IE7). I'm not even trying to get this working in IE6.
In IE7, when the item is removed, there is no sliding animation at all.

What am I missing? How can I improve my code?

Here's my code so far:
  1. <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Test Page</title>
    </head>

    <body>
        <ul style="height: 500px; width: 250px; overflow: hidden; border: 1px solid black;">
            <li>
                <h1>Feature 1</h1>
                <p>Ullamco laboris nisi eu fugiat nulla pariatur. Duis aute irure dolor ut aliquip ex ea commodo consequat. In reprehenderit in voluptate excepteur sint occaecat quis nostrud exercitation. Sed do eiusmod tempor incididunt cupidatat non proident, sunt in culpa.</p>
            </li>
            <li>
                <h1>Feature 2</h1>
                <p>Quis nostrud exercitation velit esse cillum dolore eu fugiat nulla pariatur. Duis aute irure dolor qui officia deserunt ut aliquip ex ea commodo consequat. Quis nostrud exercitation ut enim ad minim veniam, in reprehenderit in voluptate.</p>
    </li>
            <li>
                <h1>Feature 3</h1>
                <p>Ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, velit esse cillum dolore excepteur sint occaecat. Cupidatat non proident, qui officia deserunt ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, velit esse cillum dolore quis nostrud exercitation.</p>
            </li>
        </ul>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script type="text/javascript">
    $(function() {
        interval = setInterval("removeFirst(1000, 'ul', 'li')", 5000);
    });
    function removeFirst(speed, container, cItem) {
        temp = $(container + ' ' + cItem).first().html();
        $(container + ' ' + cItem)
            .first()
            .slideUp(speed, function() {$(this).remove();});
        addLast(speed, container, cItem, temp);
    }
    function addLast(speed, container, cItem, MovingItem) {
        temp = '<' + cItem + '>' + MovingItem + '</' + cItem + '>';
        $(container).append(temp)
        $(container + ' ' + cItem)
            .last()
            .slideDown(speed)
    }
    </script>
    </body>
    </html>