jQuery cross fading slideshow not working corectly
<p>Hi I am a beginner jQuery user and I am trying to create a cross fading efect but it seems I cant seem to select the corect element.This is my code:</p>

<pre><code>&lt;ul id="slideimage"&gt;
    &lt;li &gt;&lt;img src="img/slider/pic/slide01.jpg" alt="img" class="active"/&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src="img/slider/pic/slide02.jpg" alt="img" /&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src="img/slider/pic/slide03.jpg" alt="img"/&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src="img/slider/pic/slide04.jpg" alt="img"/&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src="img/slider/pic/slide05.jpg" alt="img"/&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src="img/slider/pic/slide06.jpg" alt="img"/&gt;&lt;/li&gt;
&lt;/ul&gt;

ul#slideimage li img{
          position: absolute;
          width:100%;
          height: 500px;
          z-index: 0;
            }
ul#slideimage li img.active{
          z-index: 10;
            }

(function(){
      setInterval("slideshow()" , 2000);
})();   

function slideshow(){
             var $first = $('ul#slideimage li img:first');
             var $active = $('ul#slideimage  li img.active');
             var $next = $active.next('ul#slideimage li img').length ? $active.next('ul#slideimage li img'): $first;
                        console.log($next);

                        $active.animate({'opacity':'0'},1000,function(){
                            $(this).removeClass('active').css({'opacity':'1'});
                        });
                        $next.addClass('active');
                    }
</code></pre>

<p>What is the problem with the code that it keeps fading out the first image and then making it appear again.I think I am not managing to target the next element correctly but I have been trying to do this for the last 3 hours with no success.Some help would be much appreciated.</p>
