Question

所以我把一个jquery图像旋转器放在一起，只是为了淡入和淡出页面上的一组图像。（注意，可能不相关，但它是一个drupal网站）。

这适用于IE以外的所有功能。我一直试图弄清楚为什么这么久，我找不到它。任何帮助将非常感激。这是HTML：

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;
}

最后，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

导致此问题的原因是每个包含图像的div都没有分配宽度和高度。因此IE在显示动画时将它们显示为0px * 0px。所以它似乎只是跳到下一个图像，因为动画发生在0px * 0px。

Answer 2

你没有说出问题是什么，但如果问题是不透明度淡化似乎无法正常工作，那么你的图像可能是带有alpha通道的PNG文件，或者你的图像可能是在带有alpha通道的背景上。这些浏览器使用alpha通道处理堆叠层的能力介于“有限”和“不存在”之间。

Answer 3

IE不支持CSS样式“不透明度”。 This blog post有一些解决方案。或者查看“A list apart”上的文章：Cross-Browser Variable Opacity with PNG: A Real Solution

jQuery Image Rotator仅在IE中无法正常运行

3 个答案: