Simple jQuery Image fade
<p>Im trying to get this working but for some reason it's just not right. I want an image to fade to another image and just keep looping. It works in the fiddle but not on my wordpress site. I think it has to do with this piece. Any help would be greatly appreciated. </p>

<p>Here is the example: <a href="http://jsfiddle.net/8ks9K/" rel="nofollow">http://jsfiddle.net/8ks9K/</a></p>

<p>jQ:</p>

<pre><code>function cycleImages() {
    $('#portfolio_cycler').each(function() {
        var $active = $(this).find('.active');
        var $next = ($(this).find('.active').next().length &gt; 0) ? $(this).find('.active').next() : $(this).find('img:first');
        $next.css('z-index', 2); //move the next image up the pile
        $active.fadeOut(1500, function() { //fade out the top image
            $active.css('z-index', 1).show().removeClass('active'); //reset the z-index and unhide the image
            $next.css('z-index', 3).addClass('active'); //make the next image the top one
        });
    });
}

$(document).ready(function() {
    // run every 5s
    setInterval('cycleImages()', 5000);
});
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div id="feat_header"&gt;
    &lt;div id="portfolio_cycler"&gt;
        &lt;img class="active" src="http://baylor-personal-edge.com/wp-content/themes/striking/images/text_slide1.jpg" alt="You're used to a certain type of comfort" /&gt;
        &lt;img src="http://baylor-personal-edge.com/wp-content/themes/striking/images/text_slide2.jpg" alt="You're physical should be no different" /&gt;        
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#portfolio_cycler{position:relative;}
#portfolio_cycler img{position:absolute;z-index:1}
#portfolio_cycler img.active{z-index:3}
#feat_header {
    background:#000;
    position:absolute;
    top:20px;
    left:1px;
    height:23px;
    width:310px;
    z-index:9999;
    padding:10px;
    font-size:15px;
    color:#FFF;
    font-style:italic;
    font-weight:bold;
}
</code></pre>
