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>
