Question

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.

Can anyone point me in the right direction for a fix?

Javascript:

function swapImages() {
            var $active = $('#transitionImagePlaceHolder .active');
            var $next = ($('#transitionImagePlaceHolder .active').next().length > 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);
        });

CSS:

#transitionImagePlaceHolder
    {

    }


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

    #transitionImagePlaceHolder img
    {
        display:none;
        position:absolute;
        top:4;
        left:10;
    }

HTML:

<div id="transitionImagePlaceHolder">

      <img class="active" src="Images/TransitionImages/Trans_Img_1.jpg" />
      <img src="Images/TransitionImages/Trans_Img_2.jpg" />
      <img src="Images/TransitionImages/Trans_Img_3.jpg" />


</div>

Answer 1

I am not sure what the problem is because I put together the example below at JSFiddle and it works fine in both Safari and Firefox. The only thing I can think is that you are defining your swapImages function somewhere you shouldn’t be. You should probably install Firebug in Firefox and see if you get an error.

http://jsfiddle.net/GtV3U/

Edit: My suspicion is that you need to take the setInterval call out of $(document).ready(function () {
}).