jQuery Image Rotator not functioning correctly in IE only

Question

So I have put together a jquery image rotator just to fade in and out a set of images on a page. (note, may not be relevant but it is a drupal site).

This works in all but the IE's. I have been trying to figure out why this is for so long and I cannot find it. Any help would be much appreciated. Here is the HTML:

The CSS:

#billboard-blocks .views-field-field-banner-img-fid img {
    float:right;
    position:absolute;
}
.views-field-field-banner-img-fid div {
    position:absolute;
    z-index:100;
}
.views-field-field-banner-img-fid div.previous {
    z-index:101;
}
.views-field-field-banner-img-fid div.current {
    z-index:102;
}

And finally, the jQuery:

$(document).ready(function() {
 $('.views-field-field-banner-img-fid .field-item-0').addClass('current');
 setInterval("rotateImages()", 5000);
}); 

function rotateImages() {
    var oCurPhoto = $(".views-field-field-banner-img-fid .field-item.current");
    var oNxtPhoto = oCurPhoto.next();

    if(oNxtPhoto.length == 0) {
        oNxtPhoto = $(".views-field-field-banner-img-fid div.field-item:first");
        }

    oCurPhoto.removeClass('current').addClass('previous');
    oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000,
        function() {
            oCurPhoto.removeClass('previous');
        });
}

Answer 1

You don't say what the problem is, but if the problem is that the opacity fade doesn't seem to work properly it could be that your image is a PNG file with an alpha channel, or possibly that your image is on top of a background with an alpha channel. The ability of those browsers to handle stacked layers with alpha channels is somewhere between "limited" and "nonexistent".

Answer 2

IE doesn't support the CSS style "opacity". This blog post has some solutions. Or check out the article on "A list apart": Cross-Browser Variable Opacity with PNG: A Real Solution

Answer 3

The cause of this problem was due to each div containing an image did not have a width and height assigned to it. Therefor IE was displaying them as 0px * 0px whilst it was animating. So it was appearing to just jump to the next image because the animation was happening at 0px*0px.