Help running 2 slideshows on 1 page

Help running 2 slideshows on 1 page

Ok, so I am trying to run 2 slideshows on one page using java/jquery.  I am having trouble getting them both to run correctly at the same time.  Hoping someone can take a look and tell me which portion of the code I still need to change.  Thanks!

My abbreviated html looks like:

      <ul class="slide">
            <li>picture</li>
            <li>picture</li>
            <li>picture</li>
      </ul>

      <ul class="slide2">
            <li>picture</li>
            <li>picture</li>
            <li>picture</li>
      </ul>

The script I found and am trying to modify so that it works for both is:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>   
    <script type="text/javascript">
    $('.slide li:gt(0)').hide();
    $('.slide li:last').addClass('last');
    var cur = $('.slide li:first');

    function animate() {
        cur.fadeOut( 300 );
        if ( cur.attr('class') == 'last' )
            cur = $('.slide li:first');
        else
            cur = cur.next();
        cur.fadeIn( 300 );
    }

    $(function() {
        setInterval( "animate()", 3000 );
    } );
    </script>




This is what my modified script version looks like so far:

<script type="text/javascript">
    $('.slide2 li:gt(0)').hide();
    $('.slide2 li:last').addClass('last2');
    var cur = $('.slide2 li:first');

    function animate2() {
        cur.fadeOut( 300 );
        if ( cur.attr('class') == 'last2' )
            cur = $('.slide2 li:first');
        else
            cur = cur.next();
        cur.fadeIn(300 );
    }


    $(function() {
        setInterval( "animate2()", 3000 );
    } );
    </script>


Any clue what I am missing in my modified script?