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

Posted by Cognize on Stack Overflow See other posts from Stack Overflow or by Cognize
Published on 2010-05-19T20:27:28Z Indexed on 2010/05/19 20:30 UTC
Read the original article Hit count: 214

Filed under:
|

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>

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JavaScript