Why does my JQuery Image swap not work in firefox or chrome, but fine in IE?

Question

Hi,

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

Try this:

$next.fadeIn('slow', function(){ $(this).addClass('active'); });
$active.removeClass('active');

Instead of this:

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

Answer 2

Instead of using jQuery, use the small and efficient JsSlideshow See a quick demo here - it works on all browsers.

It can easily be set up like this

var sl = new JsSlideshow({
    target: "slideshow",
    images: ["4504470765_90aa261be6.jpg", "images/4510204607_42bbb55d9c.jpg", "images/4510826808_f6edfc906a.jpg", "images/4513712885_0c008e3638.jpg"],
    transition: 3000,
    time: 2000,
    url: "http://www.flickr.com/photos/bobowen"
});

Answer 3

I would say that it's because Firefox and Chrome (probably correctly) don't modify display css property while fadeIn/fadeOut.

Do a quick test: instead of display:none;in css, do really quick fadeOut (20 ms) on non-active images after (document).ready.

If it'll work, you'll know you have to find another way of hiding images on load.

Answer 4

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 () { }).