Why does my JQuery Image swap not work in firefox or chrome, but fine in IE?
<p>Relatively new to JQuery. I've got some code that does a banner swap with a fade in fade out transition. The images swap as expected in IE8, chrome, and firefox. However, the actual fade, the smooth transition between images only works in IE.</p>

<p>Can anyone point me in the right direction for a fix?</p>

<p>Javascript:</p>

<pre><code>function swapImages() {
            var $active = $('#transitionImagePlaceHolder .active');
            var $next = ($('#transitionImagePlaceHolder .active').next().length &gt; 0) ? $('#transitionImagePlaceHolder .active').next() : $('#transitionImagePlaceHolder img:first');

            $active.fadeOut( 'slow', function () {

                $next.fadeIn('slow').addClass('active');
                $active.removeClass('active');
            });
        }

        $(document).ready(function () {
            setInterval('swapImages()', 5000);
        });
</code></pre>

<p>CSS:</p>

<pre><code>#transitionImagePlaceHolder
    {

    }


    #transitionImagePlaceHolder
    {
        position:relative;
        left: 26px;
    }

    #transitionImagePlaceHolder img
    {
        display:none;
        position:absolute;
        top:4;
        left:10;
    }
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div id="transitionImagePlaceHolder"&gt;

      &lt;img class="active" src="Images/TransitionImages/Trans_Img_1.jpg" /&gt;
      &lt;img src="Images/TransitionImages/Trans_Img_2.jpg" /&gt;
      &lt;img src="Images/TransitionImages/Trans_Img_3.jpg" /&gt;


&lt;/div&gt;
</code></pre>
