Why does my JQuery Image swap not work in firefox or chrome, but fine in IE?
- by Cognize
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>
